I've mencoba bereaksi-asli-hr paket - doesn't bekerja untuk saya maupun di Android maupun di iOS.
Berikut kode ini juga tidak cocok karena membuat tiga titik di akhir
<Text numberOfLines={1}}>
______________________________________________________________
</Text>
Satu dapat menggunakan margin dalam rangka untuk mengubah lebar baris dan menempatkannya pusat.
import { StyleSheet } from 'react-native;
<View style = {styles.lineStyle} />
const styles = StyleSheet.create({
lineStyle:{
borderWidth: 0.5,
borderColor:'black',
margin:10,
}
});
jika anda ingin memberikan margin yang dinamis maka anda dapat menggunakan Dimensi lebar.
Baru-baru ini saya mengalami masalah ini.
<Text style={styles.textRegister}> ──────── Register With ────────</Text>
dengan hasil ini:
Aku melakukan hal seperti ini. Semoga ini bisa membantu
<View style={styles.hairline} />
<Text style={styles.loginButtonBelowText1}>OR</Text>
<View style={styles.hairline} />
untuk gaya:
hairline: {
backgroundColor: '#A2A2A2',
height: 2,
width: 165
},
loginButtonBelowText1: {
fontFamily: 'AvenirNext-Bold',
fontSize: 14,
paddingHorizontal: 5,
alignSelf: 'center',
color: '#A2A2A2'
},
Anda juga dapat mencoba bereaksi-asli-hr-komponen
npm i react-native-hr-component --save
Kode anda:
import Hr from 'react-native-hr-component'
//..
<Hr text="Some Text" fontSize={5} lineColor="#eee" textPadding={5} textStyles={yourCustomStyles} hrStyles={yourCustomHRStyles} />
Ini adalah dalam Bereaksi Asli (BEJ) kode diperbarui untuk hari ini:
<View style = {styles.viewStyleForLine}></View>
const styles = StyleSheet.create({
viewStyleForLine: {
borderBottomColor: "black",
borderBottomWidth: StyleSheet.hairlineWidth,
alignSelf:'stretch',
width: "100%"
}
})
anda dapat menggunakan salah alignSelf:'peregangan'
atau lebar: "100%"
keduanya harus bekerja...
dan,
borderBottomWidth: StyleSheet.hairlineWidth
di sini StyleSheet.hairlineWidth
adalah yang tertipis,
kemudian,
borderBottomWidth: 1,
dan sebagainya untuk meningkatkan ketebalan garis.
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>
Anda dapat menggunakan native elemen pembagi.
Install dengan:
npm install --save react-native-elements
# or with yarn
yarn add react-native-elements
import { Divider } from 'react-native-elements'
Kemudian pergi dengan:
<Divider style={{ backgroundColor: 'blue' }} />
Ini adalah bagaimana saya memecahkan pembagi dengan garis-garis horizontal dan teks dalam midddle:
<View style={styles.divider}>
<View style={styles.hrLine} />
<Text style={styles.dividerText}>OR</Text>
<View style={styles.hrLine} />
</View>
Dan gaya ini:
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,
},
})