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

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

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.

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

textright: {    
  alignSelf: 'flex-end',  
},

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

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

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

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

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