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>
react-native
Gummis
quelle
quelle
Antworten:
Sie können einfach eine leere Ansicht mit einem unteren Rand verwenden.
quelle
borderBottomWidth: StyleSheet.hairlineWidth
:)Man kann den Rand verwenden, um die Breite einer Linie zu ändern und sie in der Mitte zu platzieren.
Wenn Sie den Rand dynamisch angeben möchten, können Sie die Bemaßungsbreite verwenden.
quelle
<View style = {styles.lineStyle} />
da nichts dazwischen ist ;-)styles.lineStyle
würde einemconst styles = StyleSheet.create({ lineStyle: ... });
hier entsprechen. Sie haben nurlineStyle = { ...}
das, was ein Problem verursachen würde. Eine Komplettlösung mitstyles.lineStyle
könnte seinconst styles = StyleSheet.create({ lineStyle: { borderWidth: 0.5, borderColor: 'black', margin: 10 } });
.lineStyle
gehe ich davon aus, dass Sie in Ihr StyleSheet eingefügt haben.Ich hatte vor kurzem dieses Problem.
mit diesem Ergebnis:
quelle
Ich habe es so gemacht. Hoffe das hilft
für Stil:
quelle
Ich konnte
flexbox
sogar mit einem Text in der Mitte der Linie ein Trennzeichen mit Eigenschaften zeichnen .quelle
Sie können es auch versuchen
react-native-hr-component
Dein Code:
quelle
Dies ist im JSX-Code (React Native), der bis heute aktualisiert wurde:
Sie können eine
alignSelf:'stretch'
oderwidth: "100%"
beide verwenden, sollte funktionieren ... und,hier
StyleSheet.hairlineWidth
ist also der dünnste alsound so weiter, um die Dicke der Linie zu erhöhen.
quelle
quelle
Warum machst du so etwas nicht?
quelle
Sie können den nativen Elementteiler verwenden.
Installieren Sie es mit:
Dann gehen Sie mit:
Quelle
quelle
<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-elementsDas Erstellen einer wiederverwendbaren
Line
Komponente hat für mich funktioniert:Jetzt
Line
überall importieren und verwenden :quelle
Vielleicht sollten Sie versuchen, react-native-hr wie folgt zu verwenden:
Dokumentation: https://www.npmjs.com/package/react-native-hr
quelle
quelle
So löste ich den Teiler mit horizontalen Linien und Text in der Mitte:
Und Stile dafür:
quelle
Erstellen Sie einfach eine Ansichtskomponente mit geringer Höhe.
quelle
Wenn Sie einen festen Hintergrund haben (wie Weiß), könnte dies Ihre Lösung sein:
quelle