Wie kannst du schwimmen: direkt in React Native?

Ich habe ein element, das möchte ich float right, zum Beispiel

<View style={{width: 300}}>
  <Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>

Wie kann die Text geschwommen werden /rechts ausgerichtet? Auch, warum die Text den gesamten Raum der Viewstatt einfach den Platz für "Hallo"?

InformationsquelleAutor der Frage Some Guy | 2015-08-15

  1. 72

    Können Sie direkt angeben, die Position der Ausrichtung, zum Beispiel:

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

    InformationsquelleAutor der Antwort goodhyun

  2. 64

    warum ist der Text den gesamten Raum der Anzeigen, anstatt nur den Raum für "Hallo"?

    Weil die View ist ein flex-container und standardmäßig hat flexDirection: 'Spalte' und alignItems: 'stretch'was bedeutet, dass Ihre Kinder, sollten gestreckt werden, zu füllen Ihre Breite.

    (Beachten Sie, dass pro die docsdass alle Komponenten Reagieren Nativen sind display: 'flex' standardmäßig und dass display: 'inline' überhaupt nicht existiert. Auf diese Weise werden die default-Verhalten eines Text innerhalb einer View im Reagieren Nativen unterscheidet sich vom Standard-Verhalten von span innerhalb einer div auf dem web; im letzteren Fall, die Spanne würde nicht füllen die Breite der div weil ein span ist ein inline-element standardmäßig. Gibt es kein solches Konzept in Reagieren Nativen.)

    Wie kann der Text Schwamm /rechts ausgerichtet?

    Den float Eigenschaft nicht vorhanden ist, Reagieren die Einheimischen, aber es gibt Lasten von Optionen zur Verfügung, um Sie (mit leicht unterschiedlichen Verhaltensweisen), mit denen Sie richtig auszurichten, Ihrem text. Hier sind die, an die ich denken kann:

    1. Verwenden textAlign: 'rechts' auf die Text element

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

    (Dieser Ansatz ändert nichts an der Tatsache, dass die Text füllt die gesamte Breite des View; es ist nur rechts-richtet den text innerhalb des Text.)

    2. Verwenden alignSelf: flex-end' auf die Text

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

    Diese schrumpft die Text element, um die erforderliche Größe zu halten, deren Inhalt und fügt es am Ende der Kreuz-Richtung (der horizontalen Richtung, standardmäßig) die View.

    3. Verwenden alignsItems: flex-end' auf die View

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

    Dies entspricht der Einstellung alignSelf: 'flex-end' auf alle View's Kinder.

    4. Verwenden flexDirection: 'Zeile' und justifyContent: flex-end' auf die View

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

    flexDirection: 'row' legt die Hauptrichtung der layout horizontal statt vertikal; justifyContent ist wie alignItemssondern steuert die Ausrichtung in der Haupt-Richtung statt des Kreuzes Richtung.

    5. Verwenden flexDirection: 'Zeile' auf die View und marginLeft: 'auto' auf die Text

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

    Dieser Ansatz demonstriert, der im Kontext des web-und real-CSS, in https://stackoverflow.com/a/34063808/1709587.

    6. Verwenden position: 'absolute' und rechts: 0 auf die Text:

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

    Wie im echten CSS, das nimmt den Text "out-of-flow", was bedeutet, dass seine Geschwister werden in der Lage sein, um überschneidungen und der vertikalen position an der Spitze der View standardmäßig (Sie können jedoch ausdrücklich bestimmen Sie den Abstand von der Spitze des View mit der top style-Eigenschaft).

    Natürlich, welche dieser verschiedenen Ansätze, die Sie verwenden möchten - und ob die Wahl zwischen Ihnen selbst überhaupt eine Rolle spielt - hängt von Ihren genauen Umstände.

    InformationsquelleAutor der Antwort Mark Amery

  3. 30

    Für mich die Einstellung alignItems zu einem Elternteil hat den trick, wie:

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

    InformationsquelleAutor der Antwort Cherniv

  4. 17

    Sind Sie eigentlich nicht verwenden schwebt Reagieren Nativen. Reagieren Native nutzt die flexbox zu handhaben ist, all das Zeug.

    In Ihrem Fall, werden Sie wahrscheinlich wollen, dass die container haben ein Attribut 

    justifyContent: 'flex-end'

    Und über den text nehmen, der den ganzen Raum, wieder, Sie müssen nehmen einen Blick auf Ihre container.

    Hier ist ein link zu wirklich tollen guide auf flexbox: A Complete Guide to Flexbox

    InformationsquelleAutor der Antwort eyal83

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

    flexDirection: Wenn Sie wollen, bewegen sich horizontal (Zeile) oder vertikal (Spalte)

    justifyContent: die Richtung, die Sie verschieben möchten.

    InformationsquelleAutor der Antwort Santosh Pillai

  6. -1

    Können Sie float:right in, reagieren die einheimischen 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>

    weitere Details: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction

    InformationsquelleAutor der Antwort Jiten Suthar

Schreibe einen Kommentar