Я'пробовала реагировать родной-час пакет - не't работа для меня, ни на Android, ни на iOS.
Следующий код тоже не подходит, потому что он оказывает три точки в конце
<Text numberOfLines={1}}>
______________________________________________________________
</Text>
Вы могли бы просто использовать пустой вид с нижней границы.
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: 1,
}}
/>
Можно использовать маржу для того, чтобы изменить ширину линии и поместите его центр.
import { StyleSheet } from 'react-native;
<View style = {styles.lineStyle} />
const styles = StyleSheet.create({
lineStyle:{
borderWidth: 0.5,
borderColor:'black',
margin:10,
}
});
если вы хотите дать маржи динамически, то вы можете использовать размер по ширине.
Недавно у меня была эта проблема.
<Text style={styles.textRegister}> ──────── Register With ────────</Text>
с таким результатом:
Я сделал ее такой. Надеюсь, что это помогает
<View style={styles.hairline} />
<Text style={styles.loginButtonBelowText1}>OR</Text>
<View style={styles.hairline} />
для стиля:
hairline: {
backgroundColor: '#A2A2A2',
height: 2,
width: 165
},
loginButtonBelowText1: {
fontFamily: 'AvenirNext-Bold',
fontSize: 14,
paddingHorizontal: 5,
alignSelf: 'center',
color: '#A2A2A2'
},
Вы также можете попробовать реагировать родной час-компонент`
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} />
Это реагировать родной (JSX) код, обновлена сегодня:
<View style = {styles.viewStyleForLine}></View>
const styles = StyleSheet.create({
viewStyleForLine: {
borderBottomColor: "black",
borderBottomWidth: StyleSheet.hairlineWidth,
alignSelf:'stretch',
width: "100%"
}
})
вы можете использовать `alignSelf:'участок' " или " ширина: "на 100%" и как должно работать... и,
borderBottomWidth: StyleSheet.hairlineWidth
здесь стилей.hairlineWidth является самой тонкой, затем,
borderBottomWidth: 1,
и так далее для того чтобы увеличить толщину линии.
Почему Дон'т вы сделать что-то подобное?
<View
style={{
borderBottomWidth: 1,
borderBottomColor: 'black',
width: 400,
}}
/>
import { View, Dimensions } from 'react-native'
var { width, height } = Dimensions.get('window')
// Create Component
<View style={{
borderBottomColor: 'black',
borderBottomWidth: 0.5,
width: width - 20,}}>
</View>
Может быть, вы должны попробовать использовать реагировать родной кадров что-то вроде этого:
<Hr lineColor='#b3b3b3'/>
документация: https://www.npmjs.com/package/react-native-hr
Просто создать компонент просмотра, который имеет небольшую высоту.
<View style={{backgroundColor:'black', height:10}}/>
Вы можете использовать родной делитель элемента.
Установить его с:
npm install --save react-native-elements
# or with yarn
yarn add react-native-elements
import { Divider } from 'react-native-elements'
Тогда иди с:
<Divider style={{ backgroundColor: 'blue' }} />
import {Dimensions} from 'react-native'
const { width, height } = Dimensions.get('window')
<View
style={{
borderBottomColor: '#1D3E5E',
borderBottomWidth: 1,
width : width ,
}}
/>
Это как я решил делителя с горизонтальными линиями и текстом в midddle:
<View style={styles.divider}>
<View style={styles.hrLine} />
<Text style={styles.dividerText}>OR</Text>
<View style={styles.hrLine} />
</View>
И стили для этого:
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,
},
})