react-native - flatlist - title react native
¿Cómo puedes flotar: justo en React Native? (6)
¿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.
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"?
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
Para mí, configurar
alignItems
a un padre hizo el truco, como:
var styles = StyleSheet.create({
container: {
alignItems: ''flex-end''
}
});
Puede especificar directamente la alineación del elemento, por ejemplo:
textright: {
alignSelf: ''flex-end'',
},
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
<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.