Нарисуйте горизонтальную черту в собственном реагировать

Я'пробовала реагировать родной-час пакет - не't работа для меня, ни на Android, ни на iOS.

Следующий код тоже не подходит, потому что он оказывает три точки в конце

<Text numberOfLines={1}}>               
    ______________________________________________________________
</Text>
Программирование
react-native
12-го апреля 2017 в 9:53
22 просмотров
Решение

Вы могли бы просто использовать пустой вид с нижней границы.

Комментарии (6)

Можно использовать маржу для того, чтобы изменить ширину линии и поместите его центр.

import { StyleSheet } from 'react-native;


const styles = StyleSheet.create({
  lineStyle:{
        borderWidth: 0.5,
        borderColor:'black',
        margin:10,
   }
 });

если вы хотите дать маржи динамически, то вы можете использовать размер по ширине.

Smit
Редактировал ответ 26-го сентября 2018 в 4:06
Комментарии (3)

Недавно у меня была эта проблема.

 ────────  Register With  ────────

с таким результатом:

Stephen Rauch
Редактировал ответ 6-го августа 2017 в 4:40
Комментарии (6)

Я сделал ее такой. Надеюсь, что это помогает 


OR

для стиля:

hairline: {
  backgroundColor: '#A2A2A2',
  height: 2,
  width: 165
},

loginButtonBelowText1: {
  fontFamily: 'AvenirNext-Bold',
  fontSize: 14,
  paddingHorizontal: 5,
  alignSelf: 'center',
  color: '#A2A2A2'
},
ndmeiri
Редактировал ответ 23-го января 2018 в 9:22
Комментарии (2)

Вы также можете попробовать реагировать родной час-компонент`

npm i react-native-hr-component --save

Код:

import Hr from 'react-native-hr-component'

//..

<Hr text="Some Text" fontSize={5} lineColor="#eee" textPadding={5} textStyles={yourCustomStyles} hrStyles={yourCustomHRStyles} />
Комментарии (1)

Это реагировать родной (JSX) код, обновлена сегодня: 



const styles = StyleSheet.create({
viewStyleForLine: {
    borderBottomColor: "black", 
    borderBottomWidth: StyleSheet.hairlineWidth, 
    alignSelf:'stretch',
    width: "100%"
  }
})

вы можете использовать `alignSelf:'участок' " или " ширина: "на 100%" и как должно работать... и, 

borderBottomWidth: StyleSheet.hairlineWidth

здесь стилей.hairlineWidth является самой тонкой, затем, 

borderBottomWidth: 1,

и так далее для того чтобы увеличить толщину линии.

Wai Ha Lee
Редактировал ответ 18-го апреля 2019 в 8:47
Комментарии (0)

Почему Дон'т вы сделать что-то подобное?

Комментарии (0)
import { View, Dimensions } from 'react-native'

var { width, height } = Dimensions.get('window')

// Create Component
José Fonte
Редактировал ответ 1-го июня 2017 в 12:49
Комментарии (0)

Может быть, вы должны попробовать использовать реагировать родной кадров что-то вроде этого:

<Hr lineColor='#b3b3b3'/>

документация: https://www.npmjs.com/package/react-native-hr

Комментарии (1)

Просто создать компонент просмотра, который имеет небольшую высоту.

Комментарии (0)

Вы можете использовать родной делитель элемента.

Установить его с:

npm install --save react-native-elements
# or with yarn
yarn add react-native-elements

import { Divider } from 'react-native-elements'

Тогда иди с:

Источник

Philipp
Редактировал ответ 30-го июня 2019 в 4:36
Комментарии (1)
import {Dimensions} from 'react-native'

const { width, height } = Dimensions.get('window')
Комментарии (1)

Это как я решил делителя с горизонтальными линиями и текстом в midddle:



  OR

И стили для этого:

import { Dimensions, StyleSheet } from 'react-native'

const { width } = Dimensions.get('window')

const styles = StyleSheet.create({
divider: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
  },
  hrLine: {
    width: width / 3.5,
    backgroundColor: 'white',
    height: 1,
  },
  dividerText: {
    color: 'white',
    textAlign: 'center',
    width: width / 8,
  },
})
Комментарии (0)