Esta ventana le permite ejecutar la aplicación en un simulador o un dispositivo conectado.

Conecte un dispositivo

Ahora, abra la aplicación cliente Expo en su dispositivo Android físico y seleccione la opción Escanear código QR, como se muestra a continuación.

A continuación, vuelva a la ventana de desarrollo de Expo, escanee el código de barras y espere a que se complete el proceso de compilación del paquete JavaScript. Esto suele tardar un par de minutos. Cuando se complete el proceso, ¡la aplicación debería estar ejecutándose en su teléfono!

Estructura del proyecto

Ahora que su entorno de desarrollo está listo, puede editar el código del proyecto utilizando su editor de código preferido. La carpeta del proyecto se ve algo como esto:

• activos: contiene las imágenes de la aplicación
• node_modules: contiene todas las dependencias para el proyecto
• Aplicación.js: contiene el código que representa la interfaz de usuario y es una aplicación de archivo esencial

.js está abierto en la imagen anterior. Echemos un vistazo más de cerca. Primero, importamos React de react. Nosotros, a continuación, importar el Text y View componentes de react-native. También importamos Stylesheet , lo que ayuda con el estilo.

Reaccionar Nativo que viene con construido-en componentes tales como <Text> y <View> como se opuso a la norma componentes HTML, como <div> y <p>. El componente <View> es el componente más fundamental de React Native y se utiliza para agrupar otros componentes secundarios, como <div> en HTML. El componente <Text> se utiliza para mostrar contenido de texto en la pantalla, como <p> en HTML.

En la versión repetitiva de la aplicación.js que crea Expo, hay una vista simple con un componente de texto y una barra de estado. Esta vista se devuelve desde la función App(). La constante styles contiene algunos CSS básicos para dar estilo a la vista.

A continuación, ¡agreguemos algunos componentes y estilos nuevos a la aplicación!

Crear la interfaz de usuario de la aplicación

Abrir la aplicación.archivo js e introduzca el siguiente código.

import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} /> <Button title = "+"/> </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center', bottom:20 },});

El código anterior agrega una entrada de texto simple y un botón para agregar nuevas tareas. Utilizamos estilos CSS flexbox para posicionar los componentes uno junto al otro.

Agregar Manejo de Eventos

Para obtener la entrada del usuario, lo primero que importar el useState() función de react y utilizarla para actualizar el estado de la etiqueta newTask() y setnewTask() funciones. Dado que el usuario aún no ha escrito nada, el estado inicial estará vacío. Agregue el código siguiente a la parte superior de la etiqueta App() función, justo arriba de return:

const = useState('');

a continuación definimos el taskInputHandler, que escuche el cambio en la entrada y actualiza el contenido de la etiqueta setNewTask() función. Agregue estas líneas a la función App() a continuación:

 const taskInputHandler = (enteredText) => { setNewTask(enteredText); };

Ahora registramos este controlador de entrada con el componente TextInput. Actualice su componente TextInput para que se vea como se muestra a continuación.

 <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} />

Ahora tenemos que manejar las pulsaciones de botones. Cuando el usuario presiona el botón+, queremos agregar la nueva tarea a una lista.

Primero, definiremos nuestro estado para la lista de tareas:

 const = useState();

A continuación, definimos una función addTaskHandler para agregar la nueva tarea (que se encuentra en el estado newTask) a la lista.

 const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); };

Y registre ese controlador de eventos con el componente <Button> :

 <Button title = "+" onPress = {addTaskHandler} />

Finalmente, agregaremos una nueva vista para mostrar todas las tareas de la lista que hemos creado. Esto va justo después de la vista de contenedor de entrada, pero aún dentro de la vista de contenedor principal.

 <View> {appTasks.map((task) => <Text>{task}</Text>)} </View>

Código fuente completo para la aplicación.js

El código completo de la aplicación.js se muestra a continuación. Compáralo con lo que tienes.

 import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { const = useState(''); const = useState(); const taskInputHandler = (enteredText) => { setnewTask(enteredText); }; const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); }; return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} /> <Button title = "+" onPress = {addTaskHandler} /> </View> <View> {appTasks.map((task) => <Text>{task}</Text>)} </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center, bottom:20 },});

Conclusión

En este tutorial, aprendiste a crear una aplicación nativa de React con Expo.

React Native es un excelente marco y una plataforma popular tanto para desarrolladores como para empresas. Las aplicaciones creadas con React Native están garantizadas para funcionar sin problemas en cualquier plataforma o sistema. React Native también ahorra trabajo de desarrollo al permitirle codificar su aplicación una vez y ejecutarla en cualquier plataforma móvil.

Plantillas de aplicaciones móviles Premium De CodeCanyon

CodeCanyon es un mercado en línea que tiene cientos de plantillas de aplicaciones móviles para Android, iOS, React Native e Ionic. Puede ahorrar días, incluso meses, de esfuerzo al usar uno de ellos.

Ya sea que estés empezando con React Native o que seas un desarrollador experimentado, una plantilla de aplicación React Native es una excelente manera de ahorrar tiempo y esfuerzo en tu próximo proyecto de aplicación.

Si tiene problemas para decidir qué plantilla de CodeCanyon es la adecuada para usted, estos artículos deberían ayudarle:

• 
  Mobile App
  21+ Best React Native App Templates of 2021 (Including 5 Free)
  Franc Lucas
• 
  Ionic
  15 Stunning Ionic App Templates and Ionic Themes
  Franc Lucas
• 
  React
  9 React Native App Templates for You to Study and Use
  Franc Lucas