¿Qué es React Native?

React Native es un marco de código abierto desarrollado por Facebook que permite a los desarrolladores construir aplicaciones móviles usando JavaScript y React. A diferencia de los enfoques híbridos tradicionales que hacen vistas web, React Native compila a componentes de plataforma nativa. Esto significa que la interfaz de la aplicación se construye con vistas nativas reales (como ] en iOS y ] en Android), lo que resulta en rendimiento que coincide estrechamente con aplicaciones nativas.

React Native fue lanzado por primera vez en 2015 y desde entonces ha sido adoptado por grandes empresas como Instagram, Shopify y Discord. Su vibrante comunidad y ecosistema de bibliotecas lo convierten en una opción práctica para las startups y empresas por igual.

Comienzo con React Native: Environment Setup

Antes de escribir cualquier código nativo React, usted necesita configurar su entorno de desarrollo. Los pasos exactos difieren dependiendo de si usted se dirige a iOS, Android o ambos, y si usted utiliza el CLI nativo de React o Expo.

Prerrequisitos

  • Node.js & npm (o Yarn):]] Se recomienda la versión 18 o más reciente. Descarga de nodejs.org.
  • Watchman (macOS/Linux):] Una herramienta de observación de archivos de Facebook que mejora el rendimiento. Instala a través de Homebrew ().
  • Xcode (iOS solamente):] Se requiere para la construcción y la prueba en simuladores iOS. Descarga desde la Mac App Store. Asegúrese de tener instalados los últimos Xcode Command Line Tools.
  • Android Studio (Android only):] Se requiere para los emuladores y herramientas de Android. Configurar un dispositivo virtual de Android (AVD) durante la instalación.

Elegir entre la recreación de la IL nativa y la Expo

Existen dos formas primarias para iniciar un proyecto de React Native:

  • React Native CLI: El enfoque de metal simple. Usted tiene el control completo sobre código nativo y puede integrar cualquier módulo nativo. Lo mejor para los proyectos que requieren características nativas personalizadas o optimizaciones de rendimiento.
  • Expo: Un marco gestionado construido sobre el nativo de React. Abscinta la configuración más nativa y proporciona un rico conjunto de módulos preconstruidos (camera, notificaciones de empuje, etc.) Ideal para prototipado rápido y proyectos que no necesitan código nativo personalizado. Leer más en ]expo.dev.

Para esta guía, usaremos el CLI nativo de React porque te da la mayor flexibilidad. Para crear un nuevo proyecto, ejecute:

npx @react-native-community/cli init MyApp

Después de la inicialización, navega por la carpeta del proyecto y ejecuta para lanzar el contenedor de Metro. Luego abre una segunda terminal y ejecute o para lanzar la aplicación en un emulador o dispositivo.

Conceptos básicos en la reacción de los nativos

Mastering React Native requiere entender sus bloques de construcción básicos —muchos de los cuales son extensiones directas de React para la web.

Componentes

Todo en React Native es un componente. El marco proporciona un conjunto de componentes básicos que se mapean a los elementos nativos de la UI:

  • — Un contenedor que soporta el diseño con Flexbox, estilo y manipulación táctil. Equivalente a en la web.
  • ] — Para mostrar texto. A diferencia del HTML web, debe envolver cualquier texto dentro .
  • — Muestra imágenes locales o remotas.
  • ] — Un contenedor genérico de desplazamiento.
  • — Un campo de entrada de texto.
  • — Hace una vista responder a los grifos con una retroalimentación visual.
  • — Componente de lista de alto rendimiento para conjuntos de datos grandes.

También puede componer componentes personalizados combinando estos primitivos. Para una lista completa, compruebe la documentación oficial de React Native .

State and Props

Estos son los mismos conceptos que en React for the web:

  • Props: Escaso para las propiedades. Son valores de lectura que pasan de un componente padre a un componente infantil.Configuran el comportamiento o apariencia del niño.
  • Estado:] Datos Mutables gestionados dentro de un componente. Cuando el estado cambia, el componente se reimprime. Usar gancho (componentes funcionales) o (compuestos de clase).

Ejemplo:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
 const [count, setCount] = useState(0);
 return (
 <View>
 <Text>You pressed {count} times</Text>
 <Button title="Press me" onPress={() => setCount(count + 1)} />
 </View>
 );
};
export default Counter;

La navegación no se construye en el núcleo nativo de React. La solución más popular es React Navigation. Proporciona un navegador de pila (como una pila de navegación), un navegador de pestañas y un navegador de cajones. Instala con:

npm install @react-navigation/native @react-navigation/stack

Después de la instalación, envuelve tu app con y define tus pantallas:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Styling

React Native utiliza objetos JavaScript para el estilo en lugar de CSS. Define estilos usando o objetos en línea. El motor de diseño es Flexbox por defecto, con propiedades como , , . No hay consultas de medios CSS; diseño receptivo se consigue a través de la API o bibliotecas [FLT] [FLT27]

Construyendo su primera aplicación de perfil cruzado: un ejemplo paso a paso

Construyamos una sencilla aplicación meteorológica que incluye datos de una API pública y lo muestra en ambas plataformas. Esto demostrará la gestión estatal, las solicitudes de red y la composición de componentes.

Paso 1: Configuración de proyectos

Crear un nuevo proyecto utilizando el CLI nativo de React:

npx @react-native-community/cli init WeatherApp
cd WeatherApp

Paso 2: Instalar dependencias

Necesitamos algunos paquetes:

npm install @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context

Para la llamada API, utilizaremos la API integrada . Opcionalmente instalar para iconos.

Paso 3: Construir la pantalla de inicio

Crear :

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, StyleSheet, ActivityIndicator } from 'react-native';

const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY';
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

const HomeScreen = () => {
 const [city, setCity] = useState('');
 const [weather, setWeather] = useState(null);
 const [loading, setLoading] = useState(false);
 const [error, setError] = useState(null);

 const fetchWeather = async () => {
 if (!city.trim()) return;
 setLoading(true);
 setError(null);
 try {
 const response = await fetch(`${BASE_URL}?q=${city}&appid=${API_KEY}&units=metric`);
 const data = await response.json();
 if (data.cod !== 200) {
 setError(data.message);
 } else {
 setWeather(data);
 }
 } catch (err) {
 setError('Network error');
 } finally {
 setLoading(false);
 }
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Weather App</Text>
 <TextInput
 style={styles.input}
 placeholder="Enter city name"
 value={city}
 onChangeText={setCity}
 />
 <Button title="Get Weather" onPress={fetchWeather} />
 {loading && <ActivityIndicator size="large" />}
 {error && <Text style={styles.error}>{error}</Text>}
 {weather && (
 <View style={styles.weatherContainer}>
 <Text style={styles.cityName}>{weather.name}</Text>
 <Text>Temperature: {weather.main.temp}°C</Text>
 <Text>Conditions: {weather.weather[0].description}</Text>
 </View>
 )}
 </View>
 );
};

const styles = StyleSheet.create({
 container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
 title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
 input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 5, width: '80%', padding: 10, marginBottom: 10 },
 error: { color: 'red', marginTop: 10 },
 weatherContainer: { marginTop: 20, alignItems: 'center' },
 cityName: { fontSize: 20, fontWeight: '600', marginBottom: 10 }
});

export default HomeScreen;

Paso 4: Anímese la navegación

En , importar el navegante y la pantalla:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

export default function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Weather' }} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Paso 5: Ejecuta la aplicación

Inicio Empezar el empaque Metro (]), luego ejecutar en Android () o iOS (). Usted debe ver una entrada de texto, un botón, y datos meteorológicos después de una exitosa llamada de API.

Esta aplicación básica funciona en ambas plataformas con código JavaScript idéntico. Ese es el poder de React Native.

Ventajas de usar el autóctono de reacción

  • Reutilizabilidad del código: Compartir lógica de negocio, gestión de estado y componentes de interfaz de usuario en plataformas. Incluso puede reutilizar el código con una aplicación web utilizando React Native for Web.
  • Performance:] Rendimiento casi nativo porque la interfaz de usuario se hace utilizando componentes nativos, no vistas a la web. El hilo JavaScript funciona de forma asincrónica y se pueden descargar cálculos pesados a módulos nativos.
  • Comunidad y Ecosistema: Miles de bibliotecas, una comunidad vibrante en GitHub y una amplia herramienta. Los problemas están bien documentados, y los plugins existen para casi todas las necesidades.
  • Fast Development with Hot Reload: El paqueter Metro admite Hot Module Replacement (HMR). Puede editar el código y ver los cambios al instante sin reconstruir toda la aplicación.
  • Actualizaciones de Over-the-Air:] Con servicios como Microsoft App Center o CodePush, puede presionar JavaScript y actualizaciones de activos directamente a los usuarios sin aprobación de la tienda de aplicaciones.
  • Cost-Effective: Un equipo puede mantener una base de código única en lugar de dos equipos nativos separados, lo que reduce tanto los costos de desarrollo como de mantenimiento.

Desafíos y limitaciones

A pesar de sus fortalezas, React Native no es una bala de plata:

  • ]Native Modules: Cuando necesites acceder a funciones de dispositivo no cubiertas por las bibliotecas centrales o comunitarias (por ejemplo, Bluetooth avanzado, filtros de cámara personalizados), debes escribir código de plataformas específicos en Java/Kotlin (Android) o Objective-C/Swift (iOS).
  • ]Performance Bottlenecks: React Native se basa en un puente entre JavaScript y los hilos nativos. animaciones muy complejas, gráficos en tiempo real (como juegos 3D), o procesamiento de datos pesado puede causar jank. Para la mayoría de las aplicaciones de negocio, el rendimiento es adecuado, pero para juegos o aplicaciones intensivas consideran Flutter o nativo completo.
  • ] Complejidad de depuración: Mientras las herramientas de depuración han mejorado, los fallos de la plataforma de solución de problemas pueden ser difíciles. Los problemas pueden ocurrir sólo en ciertos dispositivos Android o versiones iOS. La comunidad nativa de reacción y herramientas como ayuda Flipper, pero la experiencia de depuración no es tan sencilla como el desarrollo nativo.
  • Consistencia de usuario:] Porque cada plataforma hace que los componentes sean diferentes (por ejemplo, ] tiene diferentes apariencias en iOS y Android), es posible que necesite escribir estilos o componentes específicos de plataforma. La API ayuda a detectar el sistema operativo, pero mantener un diseño verdaderamente perfecto para píxeles en ambas plataformas puede ser tiempo.
  • Tamaño de la aplicación: React Las aplicaciones nativas tienden a ser más grandes que las aplicaciones nativas debido a la inclusión del motor JavaScript (Hermes o JavaScriptCore). El tamaño medio es de 10–20 MB más que un equivalente nativo.

Temas avanzados: Cuando usted necesita más

Interactuación con módulos nativos

Para cerrar la brecha cuando no existe una biblioteca de JavaScript, puede escribir un módulo nativo. Por ejemplo, para utilizar un sensor de hardware no compatible con un paquete comunitario:

  • En Android: Cree una clase Java que se extiende y regístrela con el paquete.
  • En iOS: Cree una clase Swift/ObjC que implemente el protocolo .
  • Entonces llámalo desde JavaScript:

Estrategias de optimización del rendimiento

  • Use Hermes: Hermes es un motor JavaScript optimizado para móvil. Hágalo en su y . Reduce el tiempo de inicio y el uso de la memoria.
  • FlatList vs ScrollView:] Usa o para largas listas. Reciclan las vistas y evitan la entrega de artículos fuera de pantalla.
  • Memoización: Usa y para prevenir re-renders innecesarios.
  • InteractionManager:] Deferir cálculos pesados hasta después de que las animaciones o transiciones terminen.
  • Conductor nativo para animaciones: Usar cuando se animan propiedades no eliminatorias (opacidad, transformación).Esto descarga animaciones al hilo nativo.
  • Caching de imagen:] Reemplazar el componente estándar con (de ) para mejorar la gestión de memoria y el caché.

Pruebas de tu aplicación

React Native soporta varias estrategias de prueba:

  • Pruebas de unísono: Usar Jest (pre-configurado) para probar funciones y lógicas puras.
  • Pruebas complementarias: Utilizar React Native Testing Library para renderizar componentes y probar interacciones de usuario.
  • End-to-End Testing: Detox by Wix es un popular marco de prueba de gris-box E2E que funciona en dispositivos y simuladores reales. simula acciones de usuario y verifica el estado UI.

Despliegue a App Stores

Antes de desplegarse, asegúrese de tener una construcción lista para la producción:

  • Configurar iconos de aplicaciones y pantallas de salpicaduras para ambas plataformas.
  • Establecer la versión de la aplicación y construir el número en y archivos de configuración nativos.
  • Para Android: Genera un APK firmado o AAB usando la llavería Android Studio. Luego sube a Google Play Console.
  • Para iOS: Archivar la aplicación en Xcode (Producto > Archivo), firmar con un certificado de distribución y subir a través de Xcode o Transporter a App Store Connect.
  • Considere usar servicios de integración continuos como GitHub Actions o Bitrise para automatizar la construcción y firma.

Ejemplos de real-mundo de aplicaciones nativas de reacción

  • Instagram (Explore Tab / Threads): Instagram utiliza React Native para partes de su aplicación, incluyendo la pestaña Explorar y la aplicación de los hilos independientes. Consiguieron compartir códigos multiplataforma mientras mantenían una sensación nativa.
  • Discord (Mobile): La aplicación móvil de Discord se construye con React Native. Aprovecharon el motor Hermes para el rendimiento y la distribución de códigos entre Android e iOS.
  • Walmart: El gigante minorista reconstruyó su aplicación móvil mediante React Native, logrando experiencias casi idénticas en ambas plataformas y reduciendo el tiempo de desarrollo.
  • Uber Eats (Restaurant Dashboard): Uber Eats utiliza React Native para su panel de control de restaurante, permitiendo la iteración rápida y el despliegue cruzado de plataformas.

Conclusión

React Native sigue siendo una opción principal para el desarrollo móvil multiplataforma debido a su equilibrio entre rendimiento, experiencia de desarrollador y reutilizabilidad de códigos. Aunque tiene limitaciones, especialmente en las aplicaciones de gran intensidad de gráficos y la complejidad de módulos nativos, se destaca por la mayoría de las aplicaciones móviles estándar, desde el comercio electrónico a las redes sociales a las herramientas de empresa.

Al dominar los conceptos básicos (componentes, estado, navegación, estilo), aprovechando el amplio ecosistema de bibliotecas, y siguiendo las mejores prácticas para el rendimiento y la prueba, puede ofrecer aplicaciones de alta calidad a usuarios de iOS y Android con una base de código única.Utilice la documentación Reactar la documentación nativa como referencia principal, y explore recursos comunitarios como