Come puoi galleggiare: proprio in React Native?

Ho un elemento che voglio galleggiare bene, per esempio

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

Come può Textessere flottato / allineato a destra? Inoltre, perché occupa l' Textintero spazio di View, anziché solo lo spazio per "Hello"?

perché il testo occupa tutto lo spazio della vista, anziché solo lo spazio per "Ciao"?

Perché Viewè un contenitore flessibile e di default ha flexDirection: 'column'e alignItems: 'stretch', il che significa che i suoi figli dovrebbero essere allungati per riempire la sua larghezza.

(Si noti, per i documenti , che tutti i componenti in React Native sono display: 'flex'predefiniti e display: 'inline'non esistono affatto. In questo modo, il comportamento predefinito di a Textall'interno di Viewin in React Native differisce dal comportamento predefinito spanall'interno di a divsul web; in quest'ultimo caso, l'intervallo non riempirebbe l'ampiezza di divperché a spanè un elemento inline per impostazione predefinita. In React Native non esiste tale concetto.)

Come si può spostare / allineare il testo a destra?

La floatproprietà non esiste in React Native, ma ci sono molte opzioni disponibili (con comportamenti leggermente diversi) che ti permetteranno di allineare il testo a destra. Ecco quelli a cui riesco a pensare:

1. Utilizzare l'elementotextAlign: 'right'Text

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

(Questo approccio non cambia il fatto che Textriempie l'intera larghezza del View; allinea semplicemente il testo all'interno del Text.)

2. Utilizzare alignSelf: 'flex-end'sulText

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

Ciò riduce l' Textelemento alla dimensione richiesta per contenere il suo contenuto e lo mette alla fine della direzione trasversale (la direzione orizzontale, per impostazione predefinita) di View.

3. Utilizzare alignItems: 'flex-end'sulView

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

Ciò equivale all'impostazione alignSelf: 'flex-end'su tutti Viewi figli.

4. Utilizzare flexDirection: 'row'e justifyContent: 'flex-end'sulView

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

flexDirection: 'row'imposta la direzione principale del layout in modo che sia orizzontale anziché verticale; justifyContentè proprio come alignItems, ma controlla l'allineamento nella direzione principale anziché nella direzione della croce.

5. Utilizzare flexDirection: 'row'su Viewe marginLeft: 'auto'suText

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

Questo approccio è dimostrato, nel contesto del web e dei CSS reali, su https://stackoverflow.com/a/34063808/1709587 .

6. Utilizzare position: 'absolute'e right: 0sul Text:

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

Come nel vero CSS, questo prende Text"fuori flusso", il che significa che i suoi fratelli saranno in grado di sovrapporlo e la sua posizione verticale sarà in cima al Viewdefault (anche se puoi impostare esplicitamente una distanza dalla cima del Viewusando la topproprietà style).

Naturalmente, quale di questi vari approcci vuoi usare - e se la scelta tra di loro è importante - dipenderà dalle tue circostanze precise.

È possibile specificare direttamente l'allineamento dell'elemento, ad esempio:

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

Per me l'impostazione alignItemsdi un genitore ha fatto il trucco, come:

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

Non dovresti usare i float in React Native. React Native sfrutta il flexbox per gestire tutta quella roba.

Nel tuo caso, probabilmente vorrai che il contenitore abbia un attributo

justifyContent: 'flex-end'

E riguardo al testo che occupa l'intero spazio, ancora una volta, devi dare un'occhiata al tuo contenitore.

Ecco un link a una guida davvero eccezionale su flexbox: Una guida completa a Flexbox

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

flexDirection: Se desideri spostarti in orizzontale (riga) o verticale (colonna)

justifyContent: la direzione che vuoi spostare.

Puoi fluttuare: giusto nel reagire nativo usando 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>

per maggiori dettagli: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction