React Native 0.87
Ejercicios de React Native sobre Imágenes
5 ejercicios de Imágenes 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
¿Cómo se carga una imagen que está dentro del proyecto?
- Asource={require("./assets/logo.png")}
- Bsource="./assets/logo.png"
- Csrc={"./assets/logo.png"}
- Dsource={{ path: "./assets/logo.png" }}
Ver la respuesta
Respuesta: A. source={require("./assets/logo.png")}
require con una ruta fija permite que Metro empaquete la imagen en la app. Las imágenes remotas usan source={{ uri }}. En React Native la prop se llama source, no src.
2 · Elige la respuesta · nivel 1
¿Qué componente muestra una imagen?
- A<Image>
- B<img>
- C<Picture>
- D<Photo>
Ver la respuesta
Respuesta: A. <Image>
Las imágenes se muestran con <Image>, que se importa de react-native. <img> es la etiqueta de la web.
3 · Encuentra el fallo · nivel 1
La app no arranca: img no es un componente válido. ¿Qué línea tiene el fallo?
1export default function Logo() {2 return (3 <View>4 <img source={require("./logo.png")} />5 </View>6 );7}Ver la respuesta
El fallo está en la línea 4:
<img source={require("./logo.png")} />Se arregla con<Image source={require("./logo.png")} />.React Native no tiene etiquetas HTML: las imágenes se muestran con el componente <Image>, importado de react-native.
4 · Completa el hueco · nivel 1
Completa para mostrar el logo que está en la carpeta del proyecto.
<Image ___={___("./logo.png")} />- source
- require
- src
- import
Ver la respuesta
Respuesta: source · require
<Image source={require("./logo.png")} />Image recibe la imagen en la prop source, y para una imagen local se usa require con la ruta. src es la prop de la web.
5 · Elige la respuesta · nivel 2
Esta imagen de internet no se ve. ¿Qué le falta?
<Image source={{ uri: "https://example.com/foto.png" }} />- AUn width y un height en el estilo
- BLa prop alt
- CEnvolverla en un <View>
- DNada: se ve con su tamaño original
Ver la respuesta
Respuesta: A. Un width y un height en el estilo
React Native no conoce el tamaño de una imagen remota hasta descargarla, así que sin dimensiones la pinta con 0 × 0. Las imágenes locales con require() sí traen su tamaño.