Dessiner une règle horizontale en React Native

Question

J'ai essayé react-native-hr paquet - ne fonctionne pas pour moi ni sur Android ni sur iOS.

Le code suivant ne convient pas non plus car il rend trois points à la fin.

<Text numberOfLines={1}}>               
    ______________________________________________________________
</Text>

Answer 1

Vous pourriez simplement utiliser une vue vide avec une bordure inférieure.

<View
  style={{
    borderBottomColor: 'black',
    borderBottomWidth: 1,
  }}
/>

Answer 2

On peut utiliser la marge pour modifier la largeur d'une ligne et la placer au centre.

import { StyleSheet } from 'react-native;
<View style = {styles.lineStyle} />

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

si vous voulez donner une marge de façon dynamique, vous pouvez utiliser Dimension width.

Answer 3

J'ai récemment eu ce problème.

<Text style={styles.textRegister}>   Register With  </Text>

avec ce résultat :

Answer 4

Je l'ai fait comme ceci. J'espère que cela vous aidera

<View style={styles.hairline} />
<Text style={styles.loginButtonBelowText1}>OR</Text>
<View style={styles.hairline} />

pour le style :

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

loginButtonBelowText1: {
  fontFamily: 'AvenirNext-Bold',
  fontSize: 14,
  paddingHorizontal: 5,
  alignSelf: 'center',
  color: '#A2A2A2'
},

Answer 5

Vous pouvez également essayer react-native-hr-component

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

Votre code :

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

//..

<Hr text="Some Text" fontSize={5} lineColor="#eee" textPadding={5} textStyles={yourCustomStyles} hrStyles={yourCustomHRStyles} />