App React Native com Expo

Vista previa del material en texto

Docente: 
M.A. Alex Pacheco Moya 
App React Native con Expo 
CONTENIDO 
• Creando App 
• Contenido del 
App.js 
 
S8 
 
 
M.A. Alex Pacheco Pagina #2 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
 
 
 
 
 
 
 
 
App React Native con Expo 
 
 
 
 
M.A. Alex Pacheco Pagina #3 
Instituto de Educación Superior Privado El Buen Pastor 
Creando nuestra aplicación ToDo 
Editaremos el archivo App.js y agregaremos componentes adicionales 
para construir nuestra aplicación. El código fuente de App.js se puede 
encontrar a continuación. 
 
 
import 
React 
from 
"react"; 
import { 
 KeyboardAvoidingView, 
 StyleSheet, 
 Text, 
 View, 
 TextInput, 
 TouchableOpacity, 
 Keyboard, 
 ScrollView, 
} from "react-native"; 
import Task from "./Task"; 
 
export default function App() { 
 const [task, setTask] = 
React.useState(); 
 const [taskItems, setTaskItems] = 
React.useState([]); 
 
 function handleAddTask() { 
 Keyboard.dismiss(); 
 setTaskItems([...taskItems, 
task]); 
 setTask(null); 
 } 
 
 function completeTask(index) { 
 let itemsCopy = [...taskItems]; 
 itemsCopy.splice(index, 1); 
 setTaskItems(itemsCopy); 
 } 
 
 return ( 
 
 
M.A. Alex Pacheco Pagina #4 
Instituto de Educación Superior Privado El Buen Pastor 
 
 <View style={styles.container}> 
 {/* Scroll view to enable 
scrolling when list gets longer 
than the page */} 
 <ScrollView 
 contentContainerStyle={{ 
 flexGrow: 1, 
 }} 
 
keyboardShouldPersistTaps="handled" 
 > 
 {/* Today's Tasks */} 
 <View 
style={styles.tasksWrapper}> 
 <Text 
style={styles.sectionTitle}>My ToDo 
List</Text> 
 <View 
style={styles.items}> 
 {/* This is where the 
tasks will go! */} 
 {taskItems.map((item, 
index) => { 
 return ( 
 <TouchableOpacity 
 key={index} 
 onPress={() => 
completeTask(index)} 
 > 
 <Task text={item} 
/> 
 </TouchableOpacity> 
 ); 
 })} 
 </View> 
 </View> 
 </ScrollView> 
 
 {/* Write a task */} 
 {/* Uses a keyboard avoiding 
view which ensures the keyboard 
does not cover the items on screen 
*/} 
 
 
M.A. Alex Pacheco Pagina #5 
Instituto de Educación Superior Privado El Buen Pastor 
 
 <KeyboardAvoidingView 
 behavior={Platform.OS === 
"ios" ? "padding" : "height"} 
 
style={styles.writeTaskWrapper} 
 > 
 <TextInput 
 style={styles.input} 
 placeholder={"Add new 
item"} 
 value={task} 
 onChangeText={(text) => 
setTask(text)} 
 /> 
 <TouchableOpacity 
onPress={() => handleAddTask()}> 
 <View 
style={styles.addWrapper}> 
 <Text 
style={styles.addText}>+</Text> 
 </View> 
 </TouchableOpacity> 
 </KeyboardAvoidingView> 
 </View> 
 ); 
} 
 
const styles = StyleSheet.create({ 
 container: { 
 flex: 1, 
 backgroundColor: "#E5E5E5", 
 }, 
 tasksWrapper: { 
 paddingTop: 80, 
 paddingHorizontal: 20, 
 }, 
 sectionTitle: { 
 fontSize: 24, 
 fontWeight: "bold", 
 }, 
 items: { 
 marginTop: 30, 
 
 
M.A. Alex Pacheco Pagina #6 
Instituto de Educación Superior Privado El Buen Pastor 
 
 }, 
 writeTaskWrapper: { 
 position: "absolute", 
 bottom: 60, 
 width: "100%", 
 flexDirection: "row", 
 justifyContent: "space-around", 
 alignItems: "center", 
 }, 
 input: { 
 paddingVertical: 15, 
 paddingHorizontal: 15, 
 backgroundColor: "#FFF", 
 width: 250, 
 }, 
 addWrapper: { 
 width: 60, 
 height: 60, 
 backgroundColor: "#FFF", 
 justifyContent: "center", 
 alignItems: "center", 
 }, 
 addText: {}, 
}); 
 
 
 
El App.js contiene: 
• Imports: para importar las bibliotecas requeridas, componentes nativos y 
personalizados 
• Function: nuestra función de aplicación contendrá el código completo. 
• Componentes básicos: componentes básicos de React Native, como 
View, ScrollView y TouchableOpacity. 
• Componente personalizado: al igual que React, podemos crear nuestros 
propios componentes personalizados y usarlos dentro de App.js mediante 
la importación. Estamos utilizando un único componente personalizado 
llamado Task escrito dentro de Task.js. La fuente se encuentra debajo. 
 
 
 
 
M.A. Alex Pacheco Pagina #7 
Instituto de Educación Superior Privado El Buen Pastor 
import 
React 
from 
"react"; 
import { View, Text, StyleSheet } from 
"react-native"; 
 
function Task(props) { 
 return ( 
 <View style={styles.item}> 
 <View style={styles.itemLeft}> 
 <Text 
style={styles.itemText}>{props.text}</Text> 
 </View> 
 </View> 
 ); 
} 
 
const styles = StyleSheet.create({ 
 item: { 
 backgroundColor: "#FFF", 
 padding: 15, 
 flexDirection: "row", 
 alignItems: "center", 
 marginBottom: 20, 
 }, 
 itemLeft: { 
 width: "100%", 
 flexDirection: "row", 
 alignItems: "center", 
 flexWrap: "wrap", 
 }, 
 itemText: { 
 maxWidth: "80%", 
 }, 
}); 
 
export default Task; 
 
 
Creamos nuestra primera aplicación móvil utilizando React Native y 
Expo CLI y la probamos en nuestro dispositivo móvil. 
 
 
 
M.A. Alex Pacheco Pagina #8 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
Referencia: 
 
Cómo configurar React Native desde cero con Expo 
 https://openwebinars.net/blog/configurar-react-native-desde-cero-con-expo/ 
 
 
Desarrollo Más Fácil React Native con Expo 
https://code.tutsplus.com/es/tutorials/easier-react-native-development-with-expo--cms-30546 
 
 
Building Your First React Native Application with Expo 
https://dev.to/codesphere/building-your-first-react-native-application-with-expo-5381 
 
https://openwebinars.net/blog/configurar-react-native-desde-cero-con-expo/
https://code.tutsplus.com/es/tutorials/easier-react-native-development-with-expo--cms-30546
https://dev.to/codesphere/building-your-first-react-native-application-with-expo-5381