react-native - flatlist - title react native

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

Question

Tengo un elemento que quiero flotar correctamente, por ejemplo

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

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

Answer 1

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

Debido a que la View es 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 de React Native se display: ''flex'' por defecto y esa display: ''inline'' no existe en absoluto. De esta manera, el comportamiento predeterminado de un Text dentro de una View en React Native difiere del comportamiento predeterminado de span dentro de un div en la web; en este último caso, el span no ocuparía el ancho del div porque un span es un elemento en línea de forma predeterminada. No existe tal concepto en React Native).

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

La propiedad float 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. Use textAlign: ''right'' en el elemento Text

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

(Este enfoque no cambia el hecho de que el Text ocupa todo el ancho de la View ; simplemente alinea a la derecha el texto dentro del Text ).

2. Use alignSelf: ''flex-end'' en el Text

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

Esto reduce el elemento Text 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 la View .

3. Use alignItems: ''flex-end'' en la View

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

Esto es equivalente a establecer alignSelf: ''flex-end'' en todos los elementos alignSelf: ''flex-end'' la View .

4. Use flexDirection: ''row'' y justifyContent: ''flex-end'' en la View

<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; justifyContent es como alignItems , pero controla la alineación en la dirección principal en lugar de la dirección transversal.

5. Use flexDirection: ''row'' en la View y marginLeft: ''auto'' en el Text

<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. Use position: ''absolute'' y right: 0 en el Text :

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

Al igual que en CSS real, esto saca 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 la View de forma predeterminada (aunque puede establecer explícitamente una distancia desde la parte superior de la View utilizando la propiedad de estilo top ).

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

Answer 6

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