Wie können Sie schweben: direkt in React Native?

156

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 Textnach rechts schweben / ausgerichtet werden? Warum nimmt das Textden gesamten Platz des ein View, anstatt nur den Platz für "Hallo"?

Irgendein Typ
quelle
Ich frage mich, ob Sie eine Antwort gefunden haben, weil die drei besten Antworten alle 3 verschiedene Stilattribute verwenden! justifyContent, alignItems, alignSelf. Ich frage mich, was richtig ist.

Antworten:

274

Warum nimmt der Text den gesamten Platz der Ansicht ein und nicht nur den Platz für "Hallo"?

Weil der Viewein Flex-Container ist und standardmäßig flexDirection: 'column'und hat alignItems: '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 und display: 'inline'überhaupt nicht vorhanden sind. Auf diese Weise unterscheidet sich das Standardverhalten von a Textin a Viewin React Native vom Standardverhalten von a spanin a divim Web. Im letzteren Fall würde die Spanne nicht die Breite von füllen, divda a spanstandardmäßig ein Inline-Element ist. In React Native gibt es kein solches Konzept.)

Wie kann der Text nach rechts verschoben / ausgerichtet werden?

Die floatEigenschaft 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 das TextElement

<View>
  <Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>

(Dieser Ansatz ändert nichts an der Tatsache, dass der Text Textdie gesamte Breite des ViewTextes ausfüllt . Er richtet den Text innerhalb des Textes nach rechts aus Text.)

2. Verwenden Sie alignSelf: 'flex-end'auf demText

<View>
  <Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>

Dadurch wird das TextElement 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 platziert View.

3. Verwenden Sie alignItems: 'flex-end'auf demView

<View style={{alignItems: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

Dies entspricht der Einstellung alignSelf: 'flex-end'aller ViewKinder des Kindes.

4. Verwenden Sie flexDirection: 'row'und justifyContent: 'flex-end'auf demView

<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
  <Text>Hello, World!</Text>
</View>

flexDirection: 'row'Legt fest, dass die Hauptrichtung des Layouts horizontal statt vertikal ist. justifyContentist genau wie alignItems, steuert aber die Ausrichtung in der Hauptrichtung anstelle der Querrichtung.

5. Verwenden Sie flexDirection: 'row'auf dem Viewund marginLeft: 'auto'auf demText

<View style={{flexDirection: 'row'}}>
  <Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>

Dieser Ansatz wird im Kontext des Web und des echten CSS unter https://stackoverflow.com/a/34063808/1709587 demonstriert .

6. Verwenden Sie position: 'absolute'und right: 0auf dem Text:

<View>
  <Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>

Wie bei echtem CSS wird dadurch das Text"aus dem Fluss" genommen, was bedeutet, dass seine Geschwister es überlappen können und seine vertikale Position Viewstandardmäßig oben auf dem (obwohl Sie explizit einen Abstand vom oberen Rand des festlegen können) ViewVerwenden der topstyle-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.

Mark Amery
quelle
2
Keine dieser Lösungen funktioniert. :( Mein Ziel war es, eine Beschriftung zu schweben, und dann würde der Text von links darum herumgehen. So - stackoverflow.com/q/19179424/1828637 - Also hatte ich gehofft : <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>.
Noitidart
Vielen Dank für die Antwort @Mark Amery! Ich mag den fünften (fünften) Ansatz sehr, da ich keine Konstante für die Höhe der Ansicht / des Containers festlegen möchte, da diese automatisch die Größe ändert.
Monero Jeanniton
Nr. 4 war ein Vergnügen für mich. Ich vermute, dass jeder, der Probleme hat, prüfen muss, wie die Ansichten enthalten sind. Dies kann sich auf das flexible Layout untergeordneter Elemente auswirken.
Tahir Khalid
82

Sie können die Ausrichtung des Elements direkt angeben, zum Beispiel:

textright: {    
  alignSelf: 'flex-end',  
},
Goodhyun
quelle
3
@goodniceweb Du bist verwirrt; In React Native gibt es keine Inline-Elemente. Die einzigen gültigen displayWerte sind 'flex'und 'none'.
Mark Amery
34

Für mich hat die Einstellung alignItemszu einem Elternteil den Trick gemacht, wie:

var styles = StyleSheet.create({
  container: {
    alignItems: 'flex-end'
  }
});
Cherniv
quelle
20

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

justifyContent: 'flex-end'

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

eyal83
quelle
13
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
  <Text>
  Some Text
  </Text>
</View>

flexDirection: Wenn Sie sich horizontal (Zeile) oder vertikal (Spalte) bewegen möchten

justifyContent: die Richtung, in die Sie sich bewegen möchten.

Santosh Pillai
quelle
1
Ein bisschen irreführend; justifyContentwählt keine Richtung an sich; Es bietet eine Reihe von Optionen für die Positionierung und den Abstand der Dinge entlang der Hauptflexrichtung.
Mark Amery
0

Sie können schweben: direkt in reagieren native mit flex:

 <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

Für weitere Informationen: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction

Jitendra Suthar
quelle
1
Dies wiederholt nur einen Ansatz, den ich bereits veröffentlicht hatte (Option 4 in meiner Antwort ), und ich sehe keinen Mehrwert.
Mark Amery