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


157

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"?


¡Me pregunto si encontraste una respuesta porque las 3 mejores respuestas dicen usar 3 atributos de estilo diferentes! justifyContent, alignItems, alignSelf. Me pregunto cuál es la correcta.

Respuestas:


275

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


2
Ninguna de estas soluciones funciona. :( Mi objetivo era flotar una leyenda, y luego el texto que venía de la izquierda iría a su alrededor. De esta manera - stackoverflow.com/q/19179424/1828637 - Entonces esperaba hacerlo:. <Text><Text>FLOAT TEXT</Text>multi line text here which wraps around float textO lo mismo pero con una imagen como esto: <View><Text><Image />multi line text which wrap around float image</Text>.
Noitidart

Gracias por la respuesta @ Mark Amery! Realmente me gusta el quinto (quinto) enfoque, ya que no me gusta establecer una constante para la altura de Vista / contenedor, ya que se ajusta automáticamente.
Monero Jeanniton

No. 4 funcionó de maravilla para mí. Sospecho que cualquier persona que tenga problemas necesita ver cómo están contenidas las vistas, esto puede influir en el diseño flexible de los elementos secundarios.
Tahir Khalid

82

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

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

3
@goodniceweb Estás confundido; allí son no hay elementos en línea en React nativo. Los únicos displayvalores válidos son 'flex'y 'none'.
Mark Amery

34

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

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

20

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


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


1
Un poco engañoso; justifyContentno elige una dirección per se; Ofrece un montón de opciones sobre cómo se posicionan y espacian las cosas a lo largo de la dirección principal de flexión.
Mark Amery

0

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


1
Esto solo repite un enfoque que ya había publicado (es la opción 4 en mi respuesta ) y no veo ningún valor agregado.
Mark Amery
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.