Desenhe régua horizontal em React Native


102

Eu tentei o pacote react-native-hr - não funciona para mim, nem no Android nem no iOS.

O código a seguir também não é adequado porque renderiza três pontos no final

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

<Text> __________ Nível {nível} __________ </Text>
Omar bakhsh

Respostas:


310

Você pode simplesmente usar uma visualização vazia com uma borda inferior.

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

51
Eu recomendo borderBottomWidth: StyleSheet.hairlineWidth:)
Ryan Pergent

17
se não funcionar, considere adicionar alignSelf: 'stretch'.
Scientist1642

1
você deve especificar o valor WIDTH para a visualização.
Mohamed Ben Hartouz

por isso é capaz de traçar uma linha, mas à esquerda e à direita há uma margem. Eu quero desenhar de ponta a ponta
Abhi

@Abhi Esse parece ser um problema que não está relacionado a esta resposta. Por favor, crie uma nova pergunta se você não encontrar uma solução
Antoine Grandchamp

23

Pode-se usar margem para alterar a largura de uma linha e colocá-la no centro.

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

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

se quiser dar margem dinamicamente, você pode usar a largura da dimensão.


Obrigado. Você também pode simplesmente, <View style = {styles.lineStyle} />já que não há nada no meio ;-)
Martin Nordström

Smit styles.lineStylecorresponderia a um const styles = StyleSheet.create({ lineStyle: ... });aqui. Você apenas tem o lineStyle = { ...}que causaria um problema. Uma solução completa com styles.lineStylepoderia ser const styles = StyleSheet.create({ lineStyle: { borderWidth: 0.5, borderColor: 'black', margin: 10 } });.
kevr

sim. você está certo. aqui eu suponho que você colocou lineStyledentro de seu StyleSheet.
Smit

13

Consegui desenhar um separador com flexboxpropriedades, mesmo com um texto no centro da linha.

<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
  <View>
    <Text style={{width: 50, textAlign: 'center'}}>Hello</Text>
  </View>
  <View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>

insira a descrição da imagem aqui


1
Esta é a melhor resposta, ela é dimensionada e se você não definir uma largura de texto, ela será dinâmica
newoda

12

Recentemente, tive esse problema.

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

com este resultado:

Imagem


27
Isso não escala bem
Petrus Theron

tão simples como isso.
Siraj Alam

@PetrusTheron por que não é bem escalável?
Nate Glenn de

Os hifens @NateGlenn serão agrupados em uma tela estreita ou parecerão muito finos em uma tela mais ampla.
Petrus Theron de

Ah, isso faz sentido. Acho que a solução é boa se você só precisar de uma linha muito curta.
Nate Glenn

9

Eu fiz assim. Espero que isto ajude

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

para o estilo:

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

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

Acho que é a melhor solução. Melhor do que usar fronteira como outras respostas.
Erick M. Sprengel

A largura da codificação pode ser um problema.
Godfrey

5

Você também pode tentar react-native-hr-component

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

Seu código:

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

//..

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

4
Isso é um pouco exagerado
conduzido em

3

Isso está no código React Native (JSX), atualizado até hoje:

<View style = {styles.viewStyleForLine}></View>

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

você pode usar um alignSelf:'stretch'ou width: "100%"ambos devem funcionar ... e,

borderBottomWidth: StyleSheet.hairlineWidth

aqui StyleSheet.hairlineWidthestá o mais fino, então,

borderBottomWidth: 1,

e assim por diante para aumentar a espessura da linha.


3

Criar um Linecomponente reutilizável funcionou para mim:

import React from 'react';
import { View } from 'react-native';

export default function Line() {
    return (
        <View style={{
            height: 1,
            backgroundColor: 'rgba(255, 255, 255 ,0.3)',
            alignSelf: 'stretch'
        }} />
    )
}

Agora, importe e use em Linequalquer lugar:

<Line />

2
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>

2

Você pode usar o divisor de elemento nativo.

Instale-o com:

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

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

Então vá com:

<Divider style={{ backgroundColor: 'blue' }} />

Fonte


2
Instalar um pacote inteiro (e provavelmente um grande) parece um exagero se você só precisa de uma linha horizontal.
Sandy

Admito que é um exagero se você for usar apenas o <Divider /> componente, no entanto, você deve usar uma biblioteca de qualquer maneira para economizar tempo em botões simples, barras de pesquisa etc ... etc ... Verifique tudo o que ela pode fazer pelo seu aplicativo react-native-elements.github.io/react-native-elements
jso1919

1

Por que você não faz algo assim?

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


0
import {Dimensions} from 'react-native'

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

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

O código é tão claro para quem tem esse tipo de problema, então se eu puder explicar mais eu o farei.
Mohamed Ben Hartouz

0

Foi assim que resolvi o divisor com linhas horizontais e texto no meio:

<View style={styles.divider}>
  <View style={styles.hrLine} />
  <Text style={styles.dividerText}>OR</Text>
  <View style={styles.hrLine} />
</View>

E estilos para isso:

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

Basta criar um componente de visualização que tenha uma altura pequena.

<View style={{backgroundColor:'black', height:10}}/>

0

Se você tiver um fundo sólido (como branco), esta pode ser sua solução:

<View style={container}>
  <View style={styles.hr} />
  <Text style={styles.or}>or</Text>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 0,
    backgroundColor: '#FFFFFF',
    width: '100%',
  },
  hr: {
    position: 'relative',
    top: 11,
    borderBottomColor: '#000000',
    borderBottomWidth: 1,
  },
  or: {
    width: 30,
    fontSize: 14,
    textAlign: 'center',
    alignSelf: 'center',
    backgroundColor: '#FFFFFF',
  },
});
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.