React Native 0.87
Ejercicios de React Native sobre Layout
7 ejercicios de Layout en React Native. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.
1 · Elige la respuesta · nivel 1
¿Cuál es el flexDirection por defecto en React Native?
- Acolumn
- Brow
- Crow-reverse
- DNo tiene: hay que declararlo siempre
Ver la respuesta
Respuesta: A. column
Al revés que en la web, el eje principal por defecto es vertical (column), porque encaja con cómo se apilan las pantallas móviles.
2 · Elige la respuesta · nivel 1
¿Qué consigue flex: 1 en el View raíz de una pantalla?
<View style={{ flex: 1 }}>{children}</View>- AQue ocupe todo el espacio disponible
- BQue coloque los hijos en fila
- CQue centre el contenido
- DNada: flex solo acepta row o column
Ver la respuesta
Respuesta: A. Que ocupe todo el espacio disponible
flex con un número positivo hace que el elemento crezca para llenar el espacio libre de su padre. Sin él, un View solo mide lo que su contenido.
3 · Completa el hueco · nivel 1
Completa para repartir los hijos en una fila con el espacio entre ellos, y que salten de línea si no caben.
const styles = StyleSheet.create({ tags: { flexDirection: "row", ___: "space-between", ___: "wrap" },});- justifyContent
- flexWrap
- alignItems
- wrap
- alignContent
- gap
Ver la respuesta
Respuesta: justifyContent · flexWrap
const styles = StyleSheet.create({ tags: { flexDirection: "row", justifyContent: "space-between", flexWrap: "wrap" },});justifyContent reparte los hijos en el eje principal, que aquí es horizontal por el row. flexWrap: "wrap" permite pasar a la línea siguiente. alignItems actúa en el eje cruzado.
4 · Elige la respuesta · nivel 2
¿Qué se recomienda hoy para que el contenido no quede bajo el notch ni la barra de gestos?
- Areact-native-safe-area-context, con SafeAreaView o useSafeAreaInsets
- BEl SafeAreaView de react-native, que funciona igual en Android
- CUn paddingTop fijo de 44
- DStatusBar.currentHeight en todas las plataformas
Ver la respuesta
Respuesta: A. react-native-safe-area-context, con SafeAreaView o useSafeAreaInsets
El SafeAreaView de react-native solo funcionaba en iOS y está obsoleto desde la 0.81. react-native-safe-area-context funciona en todas las plataformas y viene incluido en las plantillas de Expo.
5 · Elige la respuesta · nivel 2
¿Qué valor tiene flexShrink por defecto en React Native?
- A0
- B1
- Cauto
- DDepende de la plataforma
Ver la respuesta
Respuesta: A. 0
En la web, flex-shrink vale 1 por defecto; en React Native vale 0, así que un hijo no se encoge aunque no quepa. Es un motivo típico de textos que se salen de la fila: añade flexShrink: 1.
6 · Elige la respuesta · nivel 2
¿Qué altura tiene el cuadro rojo?
<View style={{ flexDirection: "row", height: 100 }}> <View style={{ width: 50, backgroundColor: "red" }} /></View>- A100, porque alignItems es stretch por defecto
- B0, porque no tiene height
- C50, igual que el ancho
- DDepende del contenido del cuadro
Ver la respuesta
Respuesta: A. 100, porque alignItems es stretch por defecto
alignItems: "stretch" es el valor por defecto y estira a los hijos en el eje cruzado. En una fila, el eje cruzado es el vertical, así que el cuadro ocupa los 100 de alto.
7 · Encuentra el fallo · nivel 2
Lanza un error: ScrollView child layout must be applied through the contentContainerStyle prop. ¿Qué línea tiene el fallo?
1<ScrollView style={{ flex: 1, alignItems: "center" }}>2 {cards}3</ScrollView>Ver la respuesta
El fallo está en la línea 1:
<ScrollView style={{ flex: 1, alignItems: "center" }}>El style de un ScrollView afecta al marco que hace scroll, no al contenido. La colocación de los hijos (alignItems, justifyContent) va en contentContainerStyle={{ alignItems: "center" }}.