Ich habe ein Element, das ich zum Beispiel richtig schweben lassen möchte
<View style={{width: 300}}>
<Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>
Wie kann das Text
nach rechts schweben / ausgerichtet werden? Warum nimmt das Text
den gesamten Platz des ein View
, anstatt nur den Platz für "Hallo"?
react-native
Irgendein Typ
quelle
quelle
justifyContent
,alignItems
,alignSelf
. Ich frage mich, was richtig ist.Antworten:
Weil der
View
ein Flex-Container ist und standardmäßigflexDirection: 'column'
und hatalignItems: 'stretch'
, was bedeutet, dass seine Kinder ausgestreckt werden sollten, um seine Breite zu füllen.(Beachten Sie gemäß den Dokumenten , dass alle Komponenten in React Native
display: 'flex'
standardmäßig vorhanden sind unddisplay: 'inline'
überhaupt nicht vorhanden sind. Auf diese Weise unterscheidet sich das Standardverhalten von aText
in aView
in React Native vom Standardverhalten von aspan
in adiv
im Web. Im letzteren Fall würde die Spanne nicht die Breite von füllen,div
da aspan
standardmäßig ein Inline-Element ist. In React Native gibt es kein solches Konzept.)Die
float
Eigenschaft ist in React Native nicht vorhanden, es stehen Ihnen jedoch zahlreiche Optionen zur Verfügung (mit leicht unterschiedlichem Verhalten), mit denen Sie Ihren Text richtig ausrichten können. Hier sind die, an die ich denken kann:1. Verwenden Sie
textAlign: 'right'
für dasText
Element(Dieser Ansatz ändert nichts an der Tatsache, dass der Text
Text
die gesamte Breite desView
Textes ausfüllt . Er richtet den Text innerhalb des Textes nach rechts ausText
.)2. Verwenden Sie
alignSelf: 'flex-end'
auf demText
Dadurch wird das
Text
Element auf die Größe verkleinert, die erforderlich ist, um seinen Inhalt zu halten, und es wird am Ende der Querrichtung (standardmäßig der horizontalen Richtung) des Elements platziertView
.3. Verwenden Sie
alignItems: 'flex-end'
auf demView
Dies entspricht der Einstellung
alignSelf: 'flex-end'
allerView
Kinder des Kindes.4. Verwenden Sie
flexDirection: 'row'
undjustifyContent: 'flex-end'
auf demView
flexDirection: 'row'
Legt fest, dass die Hauptrichtung des Layouts horizontal statt vertikal ist.justifyContent
ist genau wiealignItems
, steuert aber die Ausrichtung in der Hauptrichtung anstelle der Querrichtung.5. Verwenden Sie
flexDirection: 'row'
auf demView
undmarginLeft: 'auto'
auf demText
Dieser Ansatz wird im Kontext des Web und des echten CSS unter https://stackoverflow.com/a/34063808/1709587 demonstriert .
6. Verwenden Sie
position: 'absolute'
undright: 0
auf demText
:Wie bei echtem CSS wird dadurch das
Text
"aus dem Fluss" genommen, was bedeutet, dass seine Geschwister es überlappen können und seine vertikale PositionView
standardmäßig oben auf dem (obwohl Sie explizit einen Abstand vom oberen Rand des festlegen können)View
Verwenden dertop
style-Eigenschaft).Welcher dieser verschiedenen Ansätze Sie verwenden möchten - und ob die Wahl zwischen ihnen überhaupt von Bedeutung ist - hängt natürlich von Ihren genauen Umständen ab.
quelle
<Text><Text>FLOAT TEXT</Text>multi line text here which wraps around float text
. Oder dasselbe, aber mit einem Bild wie dies :<View><Text><Image />multi line text which wrap around float image</Text>
.Sie können die Ausrichtung des Elements direkt angeben, zum Beispiel:
quelle
display
Werte sind'flex'
und'none'
.Für mich hat die Einstellung
alignItems
zu einem Elternteil den Trick gemacht, wie:quelle
Sie sollten in React Native keine Floats verwenden. React Native nutzt die Flexbox, um all diese Dinge zu erledigen.
In Ihrem Fall möchten Sie wahrscheinlich, dass der Container ein Attribut hat
Und wenn der Text den gesamten Raum einnimmt, müssen Sie sich noch einmal Ihren Container ansehen.
Hier ist ein Link zu einer wirklich großartigen Anleitung zur Flexbox: Eine vollständige Anleitung zur Flexbox
quelle
flexDirection
: Wenn Sie sich horizontal (Zeile) oder vertikal (Spalte) bewegen möchtenjustifyContent
: die Richtung, in die Sie sich bewegen möchten.quelle
justifyContent
wählt keine Richtung an sich; Es bietet eine Reihe von Optionen für die Positionierung und den Abstand der Dinge entlang der Hauptflexrichtung.Sie können schweben: direkt in reagieren native mit flex:
Für weitere Informationen: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction
quelle