React Native 0.87

Ejercicios de React Native sobre Componentes base

8 ejercicios de Componentes base en React Native. Piensa la respuesta antes de abrirla: la explicación dice por qué las demás opciones fallan.

Prueba cuatro ejercicios sin cuenta Crear cuenta gratis

1 · Elige la respuesta · nivel 1
¿Qué pasa si pones texto directamente dentro de un <View>, sin <Text>?
```
<View>Hola</View>
```
- AError: el texto tiene que ir dentro de un <Text>
- BSe muestra con el estilo por defecto
- CSe ignora sin avisar
- DSe convierte en un <Text> automáticamente
Ver la respuesta
Respuesta: A. Error: el texto tiene que ir dentro de un <Text>
En React Native todo texto debe estar dentro de un componente <Text>. Si no, la app lanza un error en tiempo de ejecución.
2 · Elige la respuesta · nivel 1
¿Qué componente usas para mostrar un texto en React Native?
- A<Text>
- B<p>
- C<span>
- D<Label>
Ver la respuesta
Respuesta: A. <Text>
En React Native no hay etiquetas HTML: todo el texto va dentro de <Text>. <p> y <span> son de la web.
3 · Elige la respuesta · nivel 1
¿Qué componente hace de contenedor, como un <div> en la web?
- A<View>
- B<Box>
- C<div>
- D<Container>
Ver la respuesta
Respuesta: A. <View>
<View> es el bloque básico para agrupar y colocar otros componentes. <div> no existe en React Native.
4 · Elige la respuesta · nivel 1
¿De dónde se importan View y Text?
```
import { View, Text } from "___";
```
- Areact-native
- Breact
- Creact-dom
- Dexpo-web
Ver la respuesta
Respuesta: A. react-native
Los componentes nativos básicos (View, Text, Image, Pressable...) vienen del paquete react-native. De react se importan cosas como useState.
5 · Encuentra el fallo · nivel 1
Error: Text strings must be rendered within a <Text> component. ¿Qué línea tiene el fallo?
```
1export default function App() {2  return (3    <View>4      Bienvenido5    </View>6  );7}
```
Ver la respuesta
El fallo está en la línea 4: Bienvenido Se arregla con <Text>Bienvenido</Text>.
En React Native el texto no puede ir suelto dentro de un View: siempre tiene que ir envuelto en <Text>.
6 · Completa el hueco · nivel 1
Completa para mostrar un saludo dentro de un contenedor.
```
<___>  <___>Hola</Text></View>
```
- View
- Text
- div
- p
Ver la respuesta
Respuesta: View · Text
```
<View>  <Text>Hola</Text></View>
```
View es el contenedor y todo el texto va dentro de un <Text>. div y p son de la web.
7 · Ordena las líneas · nivel 1
Ordena una pantalla mínima que ocupe todo el espacio y muestre un texto.
- <Text>Hola</Text>
- </View>
- <div style={{ flex: 1, padding: 24 }}>
- <View style={{ flex: 1, padding: 24 }}>
- );
- return (
- }
- export default function App() {
Ver la respuesta
El orden correcto:
```
export default function App() {  return (    <View style={{ flex: 1, padding: 24 }}>      <Text>Hola</Text>    </View>  );}
```
Sobran: <div style={{ flex: 1, padding: 24 }}>
En React Native no hay etiquetas HTML: View es el contenedor básico y flex: 1 hace que ocupe todo el espacio disponible.
8 · Ordena las líneas · nivel 1
Ordena una pantalla que muestre el texto Hola.
- <p>Hola</p>
- <Text>Hola</Text>
- </View>
- <View>
- );
- return (
- }
- export default function App() {
Ver la respuesta
El orden correcto:
```
export default function App() {  return (    <View>      <Text>Hola</Text>    </View>  );}
```
Sobran: <p>Hola</p>
El componente devuelve un View que contiene un Text. <p> es HTML y no existe en React Native.

Más temas de React Native

Ver toda la ruta de React Native