Zeichnen Sie eine horizontale Regel in React Native

93

Ich habe das React-Native-HR- Paket ausprobiert - funktioniert weder für mich noch für Android oder iOS.

Der folgende Code ist ebenfalls nicht geeignet, da am Ende drei Punkte gerendert werden

<Text numberOfLines={1}}>               
    ______________________________________________________________
</Text>
Gummis
quelle
<Text> __________ Level {Level} __________ </ Text>
Omar bakhsh

Antworten:

279

Sie können einfach eine leere Ansicht mit einem unteren Rand verwenden.

<View
  style={{
    borderBottomColor: 'black',
    borderBottomWidth: 1,
  }}
/>
Antoine Grandchamp
quelle
45
Ich empfehle borderBottomWidth: StyleSheet.hairlineWidth:)
Ryan Pergent
13
Wenn dies nicht funktioniert, fügen Sie alignSelf hinzu: 'strecken'.
Scientist1642
1
Sie sollten den WIDTH-Wert für die Ansicht angeben.
Mohamed Ben Hartouz
durch diese in der Lage, Linie zu ziehen, aber links und rechts gibt es einen Rand. Ich möchte Ende zu Ende ziehen
Abhi
@Abhi Das scheint ein Problem zu sein, das nicht mit dieser Antwort zusammenhängt. Bitte erstellen Sie eine neue Frage, wenn Sie keine Lösung finden
Antoine Grandchamp
22

Man kann den Rand verwenden, um die Breite einer Linie zu ändern und sie in der Mitte zu platzieren.

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

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

Wenn Sie den Rand dynamisch angeben möchten, können Sie die Bemaßungsbreite verwenden.

Smit
quelle
Vielen Dank. Sie könnten auch gerade <View style = {styles.lineStyle} />da nichts dazwischen ist ;-)
Martin Nordström
Smit styles.lineStylewürde einem const styles = StyleSheet.create({ lineStyle: ... });hier entsprechen. Sie haben nur lineStyle = { ...}das, was ein Problem verursachen würde. Eine Komplettlösung mit styles.lineStylekönnte sein const styles = StyleSheet.create({ lineStyle: { borderWidth: 0.5, borderColor: 'black', margin: 10 } });.
Kevr
Ja. Du hast recht. Hier lineStylegehe ich davon aus, dass Sie in Ihr StyleSheet eingefügt haben.
Smit
12

Ich hatte vor kurzem dieses Problem.

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

mit diesem Ergebnis:

Bild

Martin Chinome
quelle
23
Dies skaliert nicht gut
Petrus Theron
so einfach ist das.
Siraj Alam
@PetrusTheron warum skaliert es nicht gut?
Nate Glenn
@ NateGlenn-Bindestriche werden auf einer schmalen Anzeige umbrochen oder auf einer breiteren Anzeige zu dünn angezeigt.
Petrus Theron
Ah, das macht Sinn. Ich denke, die Lösung ist in Ordnung, wenn Sie nur eine sehr kurze Leitung benötigen.
Nate Glenn
9

Ich habe es so gemacht. Hoffe das hilft

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

für Stil:

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

loginButtonBelowText1: {
  fontFamily: 'AvenirNext-Bold',
  fontSize: 14,
  paddingHorizontal: 5,
  alignSelf: 'center',
  color: '#A2A2A2'
},
sarin upreti
quelle
Ich denke, es ist die beste Lösung. Besser als Border wie andere Antworten.
Erick M. Sprengel
Die Hardcodierungsbreite kann ein Problem darstellen.
Mo-Gang
6

Ich konnte flexboxsogar mit einem Text in der Mitte der Linie ein Trennzeichen mit Eigenschaften zeichnen .

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

Geben Sie hier die Bildbeschreibung ein

Azhar Zafar
quelle
Dies ist die beste Antwort, sie skaliert und wenn Sie keine Textbreite festlegen, wird sie dynamisch
Owen Adley
5

Sie können es auch versuchen react-native-hr-component

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

Dein Code:

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

//..

<Hr text="Some Text" fontSize={5} lineColor="#eee" textPadding={5} textStyles={yourCustomStyles} hrStyles={yourCustomHRStyles} />
mehulmpt
quelle
4
Das ist ein bisschen übertrieben
Led
3

Dies ist im JSX-Code (React Native), der bis heute aktualisiert wurde:

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

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

Sie können eine alignSelf:'stretch'oder width: "100%"beide verwenden, sollte funktionieren ... und,

borderBottomWidth: StyleSheet.hairlineWidth

hier StyleSheet.hairlineWidthist also der dünnste also

borderBottomWidth: 1,

und so weiter, um die Dicke der Linie zu erhöhen.

Sree
quelle
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>
Filip Ilievski
quelle
1

Warum machst du so etwas nicht?

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

Sie können den nativen Elementteiler verwenden.

Installieren Sie es mit:

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

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

Dann gehen Sie mit:

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

Quelle

Shanthan
quelle
2
Die Installation eines ganzen Pakets (und wahrscheinlich eines großen) scheint übertrieben, wenn Sie nur eine horizontale Linie benötigen.
Sandy
Zugegeben, es ist übertrieben, wenn Sie nur die <Divider /> Komponente verwenden. Sie sollten jedoch eine Bibliothek verwenden, um Zeit beim Stylen einfacher Schaltflächen, Suchleisten usw. zu sparen react-native-elements.github.io/react-native-elements
jso1919
1

Das Erstellen einer wiederverwendbaren LineKomponente hat für mich funktioniert:

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'
        }} />
    )
}

Jetzt Lineüberall importieren und verwenden :

<Line />
Mohammad Zaid Pathan
quelle
0

Vielleicht sollten Sie versuchen, react-native-hr wie folgt zu verwenden:

<Hr lineColor='#b3b3b3'/>

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

J Dorrian
quelle
Wenn man Probleme auf dem Repo betrachtet, scheint es in Bezug auf Abhängigkeiten nicht so "aktiv" und aktuell zu sein :(
Made in Moon
0
import {Dimensions} from 'react-native'

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

<View
  style={{
         borderBottomColor: '#1D3E5E',
         borderBottomWidth: 1,
         width : width , 
  }}
/>
Mohamed Ben Hartouz
quelle
Der Code ist so klar für diejenigen, die diese Art von Problem haben. Wenn ich also mehr erklären kann, werde ich es tun.
Mohamed Ben Hartouz
0

So löste ich den Teiler mit horizontalen Linien und Text in der Mitte:

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

Und Stile dafür:

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,
  },
})
Laszlo
quelle
0

Erstellen Sie einfach eine Ansichtskomponente mit geringer Höhe.

<View style={{backgroundColor:'black', height:10}}/>
Parkwächter
quelle
0

Wenn Sie einen festen Hintergrund haben (wie Weiß), könnte dies Ihre Lösung sein:

<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',
  },
});
Darius Rainys
quelle