web-dev-qa-db-fra.com

Dessiner une règle horizontale dans React Native

J'ai essayé react-native-hr package - ne fonctionne ni pour moi, ni pour Android, ni pour iOS.

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

<Text numberOfLines={1}}>               
    ______________________________________________________________
</Text>
react-native
33
gumkins

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

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

On peut utiliser margin 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 dynamiquement, vous pouvez utiliser la largeur de dimension.

12
Smit

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

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

avec ce résultat: 

 Image

9
Martin Chinome

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} />
3
mehulmpt

Je l'ai fait comme ça. J'espère que cela t'aides 

<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'
},
3
sarin upreti

Pourquoi ne fais-tu pas quelque chose comme ça?

<View
  style={{
    borderBottomWidth: 1,
    borderBottomColor: 'black',
    width: 400,
  }}
/>
1
Viktor Seč
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>
1
Filip Ilievski

vous pouvez vous diviseur d'élément natif.

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


<Divider style={{ backgroundColor: 'blue' }} />
0
shanthan
import {Dimensions} from 'react-native'

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

<View
  style={{
         borderBottomColor: '#1D3E5E',
         borderBottomWidth: 1,
         width : width , 
  }}
/>
0
Mohamed Ben Hartouz

Peut-être devriez-vous essayer d'utiliser react-native-hr quelque chose comme ceci:

<Hr lineColor='#b3b3b3'/>

documentation: https://www.npmjs.com/package/react-native-hr

0
J Dorrian