Español 
Français 
English 
Utilice React Native para crear aplicaciones móviles. Descubra los beneficios y características de React Native y aprenda cómo comenzar a crear sus propias aplicaciones hoy.
React Native es una plataforma moderna y eficiente para crear aplicaciones móviles. Si eres un desarrollador experimentado o simplemente tienes curiosidad por el mundo del desarrollo de aplicaciones, React Native es una poderosa herramienta a tu disposición. Con esta tecnología, podrá crear aplicaciones para iOS y Android utilizando un único código fuente. Esto significa que ahorrará tiempo y esfuerzo y, al mismo tiempo, brindará una experiencia de usuario fluida y receptiva. En este artículo, exploraremos los beneficios y características de React Native en detalle y le mostraremos cómo comenzar a crear sus propias aplicaciones móviles hoy. Ya sea que sea un desarrollador independiente o una empresa que busque una solución de desarrollo rápido, React Native es la opción ideal para sus necesidades.
¿Qué es React Native?
React Native es un marco de código abierto desarrollado por Facebook para crear aplicaciones móviles multiplataforma. La principal diferencia entre React Native y otros marcos del desarrollo de aplicaciones móviles como Cordova o Xamarin, es que React Native no crea aplicaciones web empaquetadas dentro de una aplicación nativa, sino aplicaciones verdaderamente nativas.
Historia
React Native apareció por primera vez en 2015 y rápidamente ganó popularidad debido a su simplicidad y flexibilidad para crear aplicaciones móviles. Está basado en React, un Marco JavaScript popular utilizado para desarrollar interfaces de usuario interactivo. Utilizando el mismo concepto de componentes reutilizables, React Native permite a los desarrolladores crear aplicaciones móviles para iOS y Android utilizando un único código fuente.
Principios básicos
Los principios básicos de React Native son similares a los de React. Se basa en la creación de componentes reutilizables que se pueden combinar para construir un interfaz de usuario. Cada componente es una parte autónoma de la interfaz que puede tener su propio estado interno. Cuando el estado de un componente cambia, React Native actualiza automáticamente la interfaz de usuario para reflejar estos cambios.
Beneficios
React Native ofrece muchos beneficios para los desarrolladores de aplicaciones móviles. En primer lugar, ayuda a reducir el tiempo de desarrollo al compartir código entre diferentes plataformas. En lugar de desarrollar una aplicación para iOS y otra para Android por separado, los desarrolladores pueden utilizar el mismo código para ambas plataformas.
Además, React Native ayuda a mantener el rendimiento y la apariencia de una aplicación nativa porque utiliza los componentes nativos de las plataformas subyacentes. Esto significa que las aplicaciones desarrolladas con React Native se ejecutan sin problemas y parecen consistentes en diferentes plataformas.
Finalmente, React Native se beneficia de una gran comunidad de desarrolladores, que ofrece muchos tutoriales, bibliotecas y recursos adicionales para facilitar el desarrollo de aplicaciones móviles.
Instalación de reaccionar nativo
Requisitos previos
Antes de instalar React Native, hay algunos requisitos previos a tener en cuenta. Primero, asegúrese de tener Node.js instalado en su máquina. Se requiere Node.js para ejecutar el administrador de paquetes de Node.js, npm, que se utiliza para instalar y administrar las dependencias de React Native. También necesitarás un editor de texto o un IDE para escribir su código.
Instalación en MacOS
Para instalar React Native en macOS, puede usar npm ejecutando el siguiente comando en su terminal:
instalación npm -g reaccionar-nativo-cli
Este comando instala la CLI nativa de React globalmente. Una vez que se completa la instalación, puede crear un nuevo proyecto React Native ejecutando el siguiente comando:
reaccionar-nativo init MyProjectReactNative
Instalación en Windows
Para instalar React Native en Windows, puede utilizar Chocolatey, un administrador de paquetes para Windows. Primero, abra un símbolo del sistema como administrador y ejecute el siguiente comando para instalar Chocolatey:
instalación de choco -y nodejs.install python2 jdk8
Luego puede usar npm para instalar la CLI nativa de React ejecutando el siguiente comando:
instalación npm -g reaccionar-nativo-cli
Instalación en Linux
Para instalar React Native en Linux, puede usar npm ejecutando los siguientes comandos en su terminal:
sudo apt-get update sudo apt-get install -y curl curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - sudo apt-get install -y nodejs sudo apt-get install -y build-essential sudo apt-get install -y git
Luego puede instalar la CLI nativa de React con npm ejecutando el siguiente comando:
instalación npm -g reaccionar-nativo-cli
Comenzando con React Native
Creando un proyecto React Native
Una vez que haya instalado React Native, puede crear un nuevo proyecto utilizando la CLI de React Native. Abra su terminal y ejecute el siguiente comando:
reaccionar-nativo init MyProjectReactNative
Esto creará un nuevo directorio que contiene todos los archivos necesarios para su proyecto React Native. Una vez que se completa la creación, puede ir al directorio de su proyecto usando el siguiente comando:
cd MiProyectoReactNative
Estructura de un proyecto React Native
La estructura de un proyecto React Native es similar a la de una aplicación React. El punto de entrada de la aplicación suele estar en un archivo llamado aplicación.js, donde puede definir su componente raíz. Los demás archivos y directorios del proyecto se utilizan para organizar y gestionar los diferentes componentes, estilos, imágenes, etc.
Ejecutando una aplicación React Native
Para ejecutar su aplicación React Native, abra su terminal y asegúrese de estar en el directorio de su proyecto. Luego ejecute el siguiente comando:
reaccionar-nativo ejecutar-ios
o
reaccionar-nativo ejecutar-android
Esto iniciará el empaquetador React Native y creará su aplicación en el simulador de iOS o Android, según el comando que utilizó. Luego podrá ver su aplicación ejecutándose en el simulador.
Componentes principales de React Native
Vista
el componente Vista es el equivalente a un contenedor div en React Native. Ayuda a organizar y agrupar otros componentes, y también se le puede aplicar estilo con propiedades CSS personalizadas.
importar Reaccionar desde 'reaccionar'; importar {Ver} desde 'react-native'; const Aplicación = () => { return ( {/* ver contenido */} ); } exportar aplicación predeterminada;
Texto
el componente Texto se utiliza para mostrar texto en una aplicación React Native. Utiliza estilos de texto nativos y también se le puede aplicar estilo con propiedades CSS personalizadas.
importar Reaccionar desde 'reaccionar'; importar {Ver, Texto} desde 'react-native'; const App = () => { return (¡Hola mundo!); } exportar aplicación predeterminada;
Imagen
el componente Imagen Le permite mostrar imágenes en una aplicación React Native. Puede cargar imágenes locales o remotas y admite el almacenamiento en caché automático de imágenes.
importar Reaccionar desde 'reaccionar'; importar {Ver, Imagen} desde 'react-native'; aplicación constante = () => {retorno (); } exportar aplicación predeterminada;
Entrada de texto
el componente Entrada de texto permite a los usuarios ingresar texto en una aplicación React Native. Admite varios tipos de teclado nativo y se puede personalizar con propiedades CSS.
importar React, {useState} de 'react'; importar {Ver, Entrada de texto, Botón} desde 'react-native'; const Aplicación = () => { const [texto, setText] = useState(''); const handleInputChange = (valor) => { setText(valor); } const handleButtonPress = () => { alert(`Ingresaste: ${texto}`); } devolver ( ); } exportar aplicación predeterminada;
Botón
el componente Botón se utiliza para crear un botón en el que se puede hacer clic en una aplicación React Native. Se puede personalizar con propiedades CSS y asociar una función de devolución de llamada que se ejecutará cuando se presione el botón.
importar Reaccionar desde 'reaccionar'; importar {Ver, Botón} desde 'react-native'; const App = () => { const handleButtonPress = () => { alert('Se ha hecho clic en el botón'); } devolver ( ); } exportar aplicación predeterminada;
Estilos en React Native
Usar estilos en línea
En React Native, los estilos se pueden configurar directamente dentro de los componentes usando propiedades de estilo. Los estilos se definen utilizando una sintaxis similar a las hojas de estilos en línea en CSS.
importar Reaccionar desde 'reaccionar'; importar {Ver} desde 'react-native'; const Aplicación = () => { return ( {/* ver contenido */} ); } exportar aplicación predeterminada;
Usar hojas de estilo externas
También es posible definir estilos en hojas de estilo externas utilizando el objeto Hoja de estilo de reaccionar nativo.
importar Reaccionar desde 'reaccionar'; importar {Ver, Hoja de estilo} desde 'react-native'; const estilos = StyleSheet.create({ contenedor: { flex: 1, justifyContent: 'centro', alignItems: 'centro', }, }); const Aplicación = () => { return ( {/* ver contenido */} ); } exportar aplicación predeterminada;
Gestión de estilos dinámicos
Para administrar estilos dinámicos en React Native, puede usar variables de estado o propiedades calculadas para cambiar estilos según el contexto o las interacciones del usuario.
importar React, {useState} de 'react'; importar {Ver, Texto, Hoja de estilo} desde 'react-native'; const App = () => { const [isToggled, setToggled] = useState(false); const handleButtonPress = () => { setToggled(!isToggled); } const estilo dinámico = isToggled? estilos.containerActive: estilos.containerInactive; return (El estilo cambia dependiendo del botón ); } const estilos = StyleSheet.create({ contenedorActive: { flex: 1, justifyContent: 'centro', alignItems: 'centro', backgroundColor: 'verde', }, contenedorInactivo: { flex: 1, justifyContent: 'centro', alignItems : 'centro', color de fondo: 'rojo', }, texto: { tamaño de fuente: 24, peso de fuente: 'negrita', color: 'blanco', }, }); exportar aplicación predeterminada;
Interacción con los usuarios
Gestión de eventos
El manejo de eventos en React Native es similar al de React. Puede agregar detectores de eventos a los componentes y ejecutar funciones de devolución de llamada cuando ocurren eventos.
importar Reaccionar desde 'reaccionar'; importar {Ver, Botón} desde 'react-native'; const App = () => { const handleButtonPress = () => { alert('Se ha hecho clic en el botón'); } devolver ( ); } exportar aplicación predeterminada;
Usando gestos
React Native también ayuda a detectar y reaccionar a los gestos del usuario, como deslizar, pellizcar y rotar. Puede utilizar componentes de gestos específicos de React Native para agregar estas funciones a su aplicación.
importar React, {useState} de 'react'; importar {Ver, Hoja de estilo, PanResponder} desde 'react-native'; const Aplicación = () => { const [posición, establecerPosición] = useState({ x: 0, y: 0 }); const handlePanResponderMove = (evento, gestoEstado) => { setPosition({ x: gestoEstado.dx, y: gestoEstado.dy }); } const panResponder = PanResponder.create({ onStartShouldSetPanResponder: () => verdadero, onPanResponderMove: handlePanResponderMove, }); devolver(); } const estilos = StyleSheet.create({ contenedor: { flex: 1, justifyContent: 'centro', alignItems: 'centro', }, cuadro: { ancho: 100, alto: 100, fondoColor: 'rojo', }, } ); exportar aplicación predeterminada;
Elementos animados
React Native ofrece herramientas para crear animaciones fluidas e interactivas en sus aplicaciones. Puede utilizar los componentes de animación y las API de animación de React Native para animar las propiedades de los componentes.
importar React, {useState, useEffect} de 'react'; importar {Ver, Animado, Facilitar} desde 'react-native'; aplicación const = () => { const [opacidad] = useState(new Animated.Value(0)); useEffect(() => { Animated.timing(opacity, { toValue: 1, duración: 1000, suavización: Easing.linear, useNativeDriver: true, }).start(); }, []); regresar (¡Hola mundo!); } exportar aplicación predeterminada;
Navegando por una aplicación React Native
Usando reaccionar navegación
React Navigation es una biblioteca popular para manejar la navegación entre pantallas en una aplicación React Native. Ofrece componentes de navegación predefinidos como Navegador de pila, Navegador de pestañas y Navegador de cajones para facilitar la configuración de la navegación.
importar Reaccionar desde 'reaccionar'; importar { NavigationContainer } desde '@react-navigation/native'; importar {createStackNavigator} desde '@react-navigation/stack'; importar HomeScreen desde './screens/HomeScreen'; importar DetailScreen desde './screens/DetailScreen'; const Pila = createStackNavigator(); aplicación constante = () => {retorno (); } exportar aplicación predeterminada;
Creando rutas
Para crear rutas en una aplicación React Native, puede utilizar los componentes de navegación de React Navigation. Cada ruta corresponde a una pantalla en la aplicación y se puede configurar con propiedades adicionales como ajustes u opciones de navegación.
importar Reaccionar desde 'reaccionar'; importar {Ver, Texto, Botón} desde 'react-native'; const HomeScreen = ({ navegación }) => { const handleButtonPress = () => { navegación.navigate('Detalle', { id: 1 }); } volver (página de inicio ); } exportar la pantalla de inicio predeterminada;
Pasar parámetros entre rutas
Para pasar parámetros entre rutas en una aplicación React Native, puede usar las opciones de navegación de React Navigation. Los parámetros se pueden pasar al navegar de una ruta a otra y se pueden recuperar en el componente de destino.
importar Reaccionar desde 'reaccionar'; importar {Ver, Texto} desde 'react-native'; const DetailScreen = ({ ruta }) => { const { id } = ruta.params; return (Detalle del elemento {id}); } exportar la pantalla detallada predeterminada;
Gestión de datos en React Native
Uso de la API Fetch para solicitudes HTTP
React Native ofrece una API Fetch similar a los navegadores web para realizar solicitudes HTTP. Puede usarlo para enviar y recibir datos desde un servidor.
importar React, {useEffect, useState} de 'react'; importar {Ver, Texto} desde 'react-native'; aplicación const = () => { const [datos, setData] = useState(nulo); useEffect(() => { fetch('https://api.example.com/data') .then(respuesta => respuesta.json()) .then(jsonData => setData(jsonData)) .catch(error => consola.log(error)); return ({datos? ({datos.mensaje}): (Cargando datos...)}); } exportar aplicación predeterminada;
Usando AsyncStorage para almacenamiento local
React Native también ofrece un módulo llamado AsyncStorage que permite almacenar datos de forma asincrónica, similar al almacenamiento local en los navegadores web. Puede usarlo para almacenar datos como tokens de autenticación o preferencias del usuario localmente en el dispositivo.
importar React, {useEffect, useState} de 'react'; importar {Ver, Texto, Botón} desde 'react-native'; importar AsyncStorage desde '@react-native-async-storage/async-storage'; aplicación const = () => { const [datos, setData] = useState(nulo); useEffect(() => { AsyncStorage.getItem('datos') .then(storedData => { if (storedData) { setData(storedData); } }) .catch(error => console.log(error)); } , []); const handleButtonPress = () => { const newData = 'Nuevos datos'; AsyncStorage.setItem('data', newData) .then(() => setData(newData)) .catch(error => console.log(error)); } return ({datos? ({datos}): (No se encontraron datos)} ); } exportar aplicación predeterminada;
Usando Redux para la gestión del estado global
Para administrar el estado general de una aplicación React Native, puede usar Redux, una biblioteca de administración de estado predecible. Redux le permite centralizar el estado de la aplicación en un solo lugar y hacerlo accesible desde cualquier componente de la aplicación.
importar Reaccionar desde 'reaccionar'; importar {Ver, Texto, Botón} desde 'react-native'; importar {conectar, useDispatch, useSelector} desde 'react-redux'; importar {incrementCounter, decrementCounter} desde './actions/counterActions'; const App = () => { const contador = useSelector(estado => estado.contador); envío constante = useDispatch(); const handleIncrement = () => { despacho(incrementCounter()); } const handleDecrement = () => { despacho(decrementCounter()); } devolver ({contador} ); } exportar conexión predeterminada()(Aplicación);
Pruebas y depuración en React Native
Usando el depurador de Chrome
React Native ofrece una función de depuración que ayuda a conectar la aplicación a la herramienta de desarrollo de Chrome. Esto le permite depurar e inspeccionar el código. JavaScript de la aplicación directamente desde el navegador Chrome.
Para utilizar Chrome Debugger, primero debe habilitar la depuración USB en su dispositivo o emulador Android. A continuación, ejecute su aplicación React Native con el siguiente comando:
reaccionar-nativo ejecutar-android
Una vez que la aplicación se inicie en su dispositivo o emulador, abra Google Chrome y entrar chrome://inspect en la barra de direcciones. Debería ver su aplicación React Native en el panel "Dispositivos". Haga clic en el botón "Inspeccionar" para abrir las herramientas para desarrolladores de Chrome.
Uso de herramientas de depuración integradas
Además del Chrome Debugger, React Native también ofrece herramientas de depuración integradas que se pueden usar directamente en el emulador o en el dispositivo.
Por ejemplo, puedes usar la función consola.log para mostrar mensajes de depuración en la consola del terminal o en el panel "Desarrollador" de la aplicación Expo. También puede utilizar el Inspector de elementos para inspeccionar elementos en su aplicación y cambiar su estilo en vivo.
Para habilitar el Inspector de elementos en el emulador de iOS, toque Comando+D. Para el emulador de Android, toque Comando+M o agite su dispositivo físico. En la aplicación Expo, agite su dispositivo físico para abrir el panel "Desarrollador".
Implementación de pruebas unitarias y funcionales.
Para probar una aplicación React Native, puede utilizar herramientas de prueba populares como Jest, Enzyme o React Testing Library. Estas herramientas le permiten escribir pruebas unitarias o funcionales para verificar el comportamiento de sus componentes y funciones.
Por ejemplo, puedes escribir una prueba unitaria para comprobar si un componente renderizado contiene los elementos correctos:
importar Reaccionar desde 'reaccionar'; importar {renderizar, pantalla} desde '@testing-library/react-native'; importar aplicación desde './App'; test('Muestra el texto "¡Hola mundo!"', () => { render(); expect(screen.getByText('¡Hola mundo!')).toBeInTheDocument(); });
Publicar y distribuir su aplicación
Preparando la versión de producción.
Antes de publicar su aplicación React Native, es importante asegurarse de que esté lista para producción. Esto incluye eliminar cualquier código de depuración o información confidencial, así como verificar el rendimiento y la estabilidad de la aplicación.
También se recomienda probar su aplicación en diferentes plataformas y dispositivos para asegurarse de que funcione correctamente en diferentes entornos.
Generando archivos APK e IPA
Para generar archivos APK e IPA para su aplicación React Native, puede utilizar las herramientas de compilación proporcionadas por React Native. Estas herramientas le permiten generar binarios listos para instalar en dispositivos Android (APK) e iOS (IPA).
Para generar un archivo APK para Android, abre tu terminal y ejecuta el siguiente comando:
cd android ./gradlew ensamblar Lanzamiento
El archivo APK generado se ubicará en el directorio android/aplicación/compilación/salidas/apk/lanzamiento.
Para generar un archivo IPA para iOS, abra su terminal y ejecute los siguientes comandos:
cd ios xcodebuild -workspace MyReactNativeProject.xcworkspace -scheme MyReactNativeProject -archivePath build/MyReactNativeProject.xcarchive archive xcodebuild -exportArchive -archivePath build/MyReactNativeProject.xcarchive -exportPath build -exportOptionsPlist exportOptions.plist
El archivo IPA generado se ubicará en el directorio ios/compilación.
Subido a tiendas de aplicaciones.
Una vez que haya generado los archivos APK e IPA para su aplicación React Native, puede enviarlos a las respectivas tiendas de aplicaciones, Google Play Store y Manzana App Store, para que estén disponibles para su descarga.
Enviar su aplicación a Google Play Store y Apple App Store implica varios pasos, incluida la creación de una cuenta de desarrollador, la preparación de ciertos elementos, como capturas de pantalla y descripciones, y el seguimiento de pautas y políticas ciegas.
Es importante revisar las pautas específicas para cada plataforma y seguir las instrucciones proporcionadas por las tiendas de aplicaciones para enviar su aplicación con éxito.