¿Cómo puedes flotar: justo en React Native?

Tengo un elemento que quiero flotar correctamente, por ejemplo

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

¿Cómo se Textpuede flotar / alinear a la derecha? Además, ¿por qué Textocupan el espacio completo de la View, en lugar de solo el espacio para "Hola"?

¿Por qué el Texto ocupa el espacio completo de la Vista, en lugar de solo el espacio para "Hola"?

Debido a que Viewes un contenedor flexible y por defecto tiene flexDirection: 'column'y alignItems: 'stretch', lo que significa que sus hijos deben estirarse para llenar su ancho.

(Tenga en cuenta, según los documentos , que todos los componentes en React Native son display: 'flex'por defecto y que display: 'inline'no existe en absoluto. De esta manera, el comportamiento predeterminado de a Textdentro de a Viewen React Native difiere del comportamiento predeterminado de spandentro de a diven la web; en el último caso, el intervalo no ocuparía el ancho de divporque a spanes un elemento en línea de forma predeterminada. No existe ese concepto en React Native).

¿Cómo se puede flotar / alinear el texto a la derecha?

La floatpropiedad no existe en React Native, pero hay muchas opciones disponibles para usted (con comportamientos ligeramente diferentes) que le permitirán alinear correctamente su texto. Estos son los que puedo pensar:

1. Uso textAlign: 'right'en el Textelemento

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

(Este enfoque no cambia el hecho de que Textllena todo el ancho del View; simplemente alinea correctamente el texto dentro del Text.)

2. Uso alignSelf: 'flex-end'en elText

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

Esto reduce el Textelemento al tamaño requerido para mantener su contenido y lo coloca al final de la dirección transversal (la dirección horizontal, por defecto) de View.

3. Uso alignItems: 'flex-end'en elView

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

Esto es equivalente a configurar alignSelf: 'flex-end'en todos los Viewhijos de.

4. Uso flexDirection: 'row'y justifyContent: 'flex-end'en elView

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

flexDirection: 'row'establece que la dirección principal del diseño sea horizontal en lugar de vertical; justifyContentes igual que alignItems, pero controla la alineación en la dirección principal en lugar de la dirección transversal.

5. Uso flexDirection: 'row'en Viewy marginLeft: 'auto'en elText

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

Este enfoque se demuestra, en el contexto de la web y CSS real, en https://stackoverflow.com/a/34063808/1709587 .

6. Uso position: 'absolute'y right: 0en Text:

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

Al igual que en CSS real, esto elimina el Text"fuera de flujo", lo que significa que sus hermanos podrán superponerlo y su posición vertical estará en la parte superior de Viewforma predeterminada (aunque puede establecer explícitamente una distancia desde la parte superior de la pantalla). Viewusando la toppropiedad de estilo).

Naturalmente, cuál de estos diversos enfoques desea utilizar, y si la elección entre ellos es importante, dependerá de sus circunstancias precisas.

Puede especificar directamente la alineación del elemento, por ejemplo:

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

Para mí, configurar alignItemsa un padre hizo el truco, como:

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

No se supone que uses flotadores en React Native. React Native aprovecha el flexbox para manejar todo eso.

En su caso, probablemente querrá que el contenedor tenga un atributo

justifyContent: 'flex-end'

Y sobre el texto que ocupa todo el espacio, nuevamente, debe echar un vistazo a su contenedor.

Aquí hay un enlace a una guía realmente excelente en flexbox: una guía completa de Flexbox

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

flexDirection: Si desea moverse horizontalmente (fila) o verticalmente (columna)

justifyContent: la dirección que quieres mover.

Puede flotar: justo en reaccionar 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>

para más detalles: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction