React Native 0.87
Ejercicios de React Native sobre Interacción
7 ejercicios de Interacción 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
¿Para qué sirve <Pressable>?
- APara detectar cuándo el usuario pulsa algo
- BPara mostrar una lista
- CPara escribir texto
- DPara cargar imágenes
Ver la respuesta
Respuesta: A. Para detectar cuándo el usuario pulsa algo
Pressable envuelve cualquier cosa y avisa con onPress cuando el usuario la toca. Es la forma recomendada de hacer botones personalizados.
2 · Encuentra el fallo · nivel 1
En el móvil, pulsar no hace nada. ¿Qué línea tiene el fallo?
1function Like() {2 const [liked, setLiked] = useState(false);3 return (4 <Pressable onClick={() => setLiked(!liked)}>5 <Text>{liked ? "♥" : "♡"}</Text>6 </Pressable>7 );8}Ver la respuesta
El fallo está en la línea 4:
<Pressable onClick={() => setLiked(!liked)}>Los componentes pulsables de React Native usan onPress. onClick es de la web y en iOS y Android se ignora.
3 · Encuentra el fallo · nivel 1
Guarda nada más abrir la pantalla y no al pulsar. ¿Qué línea tiene el fallo?
1<Pressable onPress={save()}>2 <Text>Guardar</Text>3</Pressable>Ver la respuesta
El fallo está en la línea 1:
<Pressable onPress={save()}>save() se ejecuta durante el render y a onPress le llega su resultado. Hay que pasar la función: onPress={save} u onPress={() => save()}.
4 · Completa el hueco · nivel 1
Completa un botón táctil que sume uno al contador.
<___ ___={() => setCount(count + 1)}> <Text>Sumar</Text></Pressable>- Pressable
- onPress
- onClick
- Button
- TouchableDiv
- onTap
Ver la respuesta
Respuesta: Pressable · onPress
<Pressable onPress={() => setCount(count + 1)}> <Text>Sumar</Text></Pressable>Pressable es el componente recomendado para cualquier cosa pulsable. El evento se llama onPress, no onClick.
5 · Completa el hueco · nivel 1
Completa para que al pulsar se muestre un aviso.
<Pressable ___={() => alert("Guardado")}> <Text>Guardar</Text></Pressable>- onPress
- onClick
- onTouch
- href
Ver la respuesta
Respuesta: onPress
<Pressable onPress={() => alert("Guardado")}> <Text>Guardar</Text></Pressable>En React Native el toque se escucha con onPress. onClick es de React para la web.
6 · Ordena las líneas · nivel 1
Ordena un botón que muestre Pulsado al tocarlo.
- <Text>Tócame</Text>
- </Pressable>
- <Pressable onClick={() => alert("Pulsado")}>
- <Pressable onPress={() => alert("Pulsado")}>
Ver la respuesta
El orden correcto:
<Pressable onPress={() => alert("Pulsado")}> <Text>Tócame</Text></Pressable>Sobran: <Pressable onClick={() => alert("Pulsado")}>
Pressable envuelve el contenido del botón y escucha el toque con onPress, no con onClick.
7 · Completa el hueco · nivel 2
Completa para cambiar el estilo mientras se mantiene pulsado el botón. Una ficha se puede usar más de una vez.
<Pressable style={({ ___ }) => [styles.button, ___ && styles.pressed]} onPress={onSave}> <Text>Guardar</Text></Pressable>- pressed
- hovered
- active
- focused
- isPressed
- touched
Ver la respuesta
Respuesta: pressed · pressed
<Pressable style={({ pressed }) => [styles.button, pressed && styles.pressed]} onPress={onSave}> <Text>Guardar</Text></Pressable>La prop style de Pressable admite una función que recibe el estado de la interacción. pressed es true mientras el dedo está encima, y un array de estilos combina el base con el condicional.