S.E.P.
S.E.M.S.
D.G.E.T.I.
CENTRO DE BACHILLERATO TECNOLOGICO industrial y de servicios No. 1
MÓDULO V: DESARROLLA APLICACIONES PARA DISPOSITIVOS MÓVILES
SUBMÓDULO 2: DESARROLLA APLICACIONES MÓVILES PARA IOS
MAESTRAS: I.S.C. LORENA SANTANA MARTINEZ
Periodo: FEBRERO-JULIO 2024
NOMBRE: __________________________________________GRUPO__________CAL:____
PRACTICA_36_CONTEO_PRESION_BOTON_IOS
1.- Entra a la plataforma de tu sesión de React Native y escribe anota este programa:
//Nombre: Maestra Lorena Santana Martínez
//DESARROLLA APLICACIONES MÓVILES PARA IOS
// Nombre del Alumno:
//Ejemplo programa del teclado visible Con REACT NATIVE
import React, { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
const App = () => {
const [timesPressed, setTimesPressed] = useState(0);
let textLog = '';
if (timesPressed > 1) {
textLog = timesPressed + ' Veces presionado el boton';
} else if (timesPressed > 0) {
textLog = 'onPress';
}
return (
<View style={styles.container}>
<Pressable
onPress={() => {
setTimesPressed((current) => current + 1);
}}
style={({ pressed }) => [
{
backgroundColor: pressed
? 'rgb(210, 230, 255)'
: 'white'
},
styles.wrapperCustom
]}>
{({ pressed }) => (
<Text style={styles.text}>
{pressed ? 'Pressed!' : 'Presiona AQUI'}
</Text>
)}
</Pressable>
<View style={styles.logBox}>
<Text testID="pressable_press_console">{textLog}</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
},
text: {
fontSize: 16
},
wrapperCustom: {
borderRadius: 8,
padding: 6
},
logBox: {
padding: 20,
margin: 10,
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#f0f0f0',
backgroundColor: '#f9f9f9'
}
});
export default App;
, saldrá lo siguiente en forma
2.- Al ejecutar el programa con web
desvanecida:
3.- Cambiar los mensajes de los botones
4.- Cambiar el color del botón
5.- Graba nombre al programa como PRACTICA_36_CONTEO_PRESION_BOTON y dar
clic en Save
6.- En un documento nuevo de Word copia el código ya con las modificaciones realizadas
7.- En el mismo documento de Word captura la pantalla de lo que te muestra al ejecutar el
programa con web
8.- En el mismo documento de Word, captura la pantalla de lo que te muestra al dar clic en
My Device
y Pegar el código QR
9.- Graba nombre del documento como PRACTICA 36_Nombre Alumno, cámbialo el
documento con formato PDF y enviar
