¿Por qué el Texto ocupa el espacio completo de la Vista, en lugar de solo el espacio para "Hola"?
Debido a que 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 en React Native son display: 'flex'
por defecto y que display: 'inline'
no existe en absoluto. De esta manera, el comportamiento predeterminado de a Text
dentro de a View
en React Native difiere del comportamiento predeterminado de span
dentro de a div
en la web; en el último caso, el intervalo no ocuparía el ancho de div
porque a span
es 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 float
propiedad 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:
<View>
<Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>
(Este enfoque no cambia el hecho de que Text
llena todo el ancho del View
; simplemente alinea correctamente el texto dentro del Text
.)
<View>
<Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>
Esto reduce el Text
elemento 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
.
<View style={{alignItems: 'flex-end'}}>
<Text>Hello, World!</Text>
</View>
Esto es equivalente a configurar alignSelf: 'flex-end'
en todos los View
hijos de.
<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 igual que alignItems
, pero controla la alineación en la dirección principal en lugar de la dirección transversal.
<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 .
<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 View
forma predeterminada (aunque puede establecer explícitamente una distancia desde la parte superior de la pantalla). View
usando la top
propiedad 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.
justifyContent
,alignItems
,alignSelf
. Me pregunto cuál es la correcta.