Jak możesz unosić się na wodzie: bezpośrednio w React Native?

Na przykład mam element, który chcę, aby był dobrze unoszony

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

Jak można Textprzesunąć / wyrównać w prawo? Ponadto, dlaczego zajmuje Textcałą przestrzeń View, a nie tylko miejsce na „Hello”?

dlaczego tekst zajmuje całą przestrzeń widoku, a nie tylko miejsce na napis „Hello”?

Ponieważ Viewjest to kontener elastyczny i domyślnie ma flexDirection: 'column'i alignItems: 'stretch', co oznacza, że ​​jego elementy podrzędne powinny zostać rozciągnięte, aby wypełnić jego szerokość.

(Zauważ, zgodnie z dokumentacją , że wszystkie komponenty w React Native są display: 'flex'domyślne i one w display: 'inline'ogóle nie istnieją. W ten sposób domyślne zachowanie a Textwewnątrz a Vieww React Native różni się od domyślnego zachowania spanwewnątrz a divw sieci; w tym drugim przypadku rozpiętość nie wypełniłaby szerokości elementu, divponieważ a spanjest domyślnie elementem wbudowanym. W React Native nie ma takiej koncepcji).

Jak można przesunąć tekst / wyrównać go do prawej strony?

Ta floatwłaściwość nie istnieje w React Native, ale jest mnóstwo dostępnych opcji (z nieco innymi zachowaniami), które pozwolą ci wyrównać tekst do prawej. Oto te, które przychodzą mi do głowy:

1. Użyj textAlign: 'right'na Textelemencie

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

(To podejście nie zmienia faktu, że Textwypełnia całą szerokość View; po prostu wyrównuje tekst do prawej strony Text.)

2. Użyj alignSelf: 'flex-end'naText

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

Spowoduje to zmniejszenie Textelementu do rozmiaru wymaganego do przechowywania jego zawartości i umieszczenie go na końcu kierunku poprzecznego (domyślnie kierunku poziomego) View.

3. Użyj alignItems: 'flex-end'naView

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

Jest to równoważne z ustawieniem alignSelf: 'flex-end'na wszystkich Viewdzieciach.

4. Użyj flexDirection: 'row'i justifyContent: 'flex-end'naView

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

flexDirection: 'row'ustawia główny kierunek układu jako poziomy zamiast pionowego; justifyContentdziała podobnie alignItems, ale kontroluje wyrównanie w kierunku głównym zamiast w kierunku poprzecznym.

5. Użyj flexDirection: 'row'na ViewimarginLeft: 'auto' naText

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

To podejście jest zademonstrowane w kontekście sieci i prawdziwego CSS na stronie https://stackoverflow.com/a/34063808/1709587 .

6. Użyj position: 'absolute'i right: 0naText :

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

Podobnie jak w prawdziwym CSS, powoduje to Text„wyjście z przepływu”, co oznacza, że ​​jego rodzeństwo będzie mogło na niego nakładać, a jego pozycja w pionie będzie Viewdomyślnie na górze (chociaż możesz wyraźnie ustawić odległość od górnej krawędziView używając topwłaściwości style).

Oczywiście, które z tych różnych podejść chcesz zastosować - i czy wybór między nimi w ogóle ma znaczenie - będzie zależeć od twoich konkretnych okoliczności.

Możesz bezpośrednio określić wyrównanie elementu, na przykład:

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

Dla mnie ustawienie alignItemsz rodzicem załatwiło sprawę, na przykład:

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

Nie powinieneś używać pływaków w React Native. React Native wykorzystuje flexbox do obsługi tego wszystkiego.

W twoim przypadku prawdopodobnie będziesz chciał, aby kontener miał atrybut

justifyContent: 'flex-end'

A jeśli chodzi o tekst zajmujący całą przestrzeń, ponownie musisz spojrzeć na swój kontener.

Oto link do naprawdę świetnego przewodnika po Flexbox: Kompletny przewodnik po Flexbox

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

flexDirection: Jeśli chcesz przesunąć poziomo (wiersz) lub pionowo (kolumna)

justifyContent: kierunek, w którym chcesz się poruszać.

Możesz unosić się: bezpośrednio reaguj natywnie używając 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>

więcej szczegółów: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction