Desarrollo móviles con React Native

Introducción

React Native es un marco de desarrollo de aplicaciones móviles que permite crear aplicaciones nativas para iOS y Android utilizando componentes React.

Presentación de React Native

React Native está diseñado para facilitar el desarrollo de aplicaciones móviles utilizando conocimientos de React.

1. Componentes nativos

A diferencia del desarrollo web con React, donde usamos componentes HTML, React Native nos proporcionará componentes específicos. Por ejemplo, en lugar de usar <div>, utilizamos componentes como <View>. Estos componentes específicos son llamados los componentes principales de React Native y son numerosos.

Así, en lugar de escribir vistas en Swift para iOS o en Kotlin/Java para Android, vamos a utilizar estos componentes, y React Native se encargará de llamar a los componentes nativos correspondientes en cada plataforma.

2. Reutilizar la lógica

Gran parte de la lógica empresarial y los componentes pueden compartirse entre aplicaciones iOS y Android. Esto reduce el tiempo y el esfuerzo necesarios para desarrollar y mantener aplicaciones para diferentes plataformas. Esto es especialmente cierto si ya tienes grandes habilidades en JavaScript y React, ya que ya no necesitas aprender a codificar en Swift o Java.

3. Acceso a las funciones del dispositivo

Usted puede acceder a la funcionalidad del dispositivo, como la cámara, el GPS, los sensores, etc., mediante API específicas de React Native. Si es necesario, puede integrar módulos nativos escritos en Swift (para iOS) o Java/Kotlin (para Android)...

Crear una aplicación con Expo

Hay varias formas de crear una aplicación React Native, como se menciona en la documentación oficial. La más sencilla es utilizar el framework de código abierto Expo.

Expo es un conjunto de herramientas y de servicios que facilitan el desarrollo de aplicaciones React Native. Ofrece un enfoque simplificado para iniciarse rápidamente en el desarrollo de aplicaciones móviles sin tener que configurar entornos de desarrollo nativos.

Fusiona lo mejor de móvil y web, ofreciendo características esenciales para desarrollar o mejorar una aplicación, incluyendo actualizaciones en tiempo real, compartir instantáneamente su aplicación y soporte web. El paquete npm de Expo ofrece una impresionante gama de funciones para aplicaciones React Native. Se puede integrar en casi cualquier proyecto.

1. La herramienta create-expo-app

Antes de empezar, asegúrese de haber instalado Node.js, Git y Watchman (sólo para Linux o macOS).

La mejor manera de instalar Watchman, como se indica en la documentación de la herramienta, es utilizar Homebrew y escribir estos dos comandos: brew update y luego brew install watchman.

Para facilitar la creación de proyectos, existe una herramienta de línea de comandos llamada create-expo-app, que podemos utilizar simplemente con npx :

npx create-expo-app MiAplicaciónExpo

Este comando toma como argumento...

Configurar la navegación

La navegación entre las diferentes partes de su aplicación es esencial para proporcionar una experiencia de usuario fluida. En React Native, existen varias bibliotecas de navegación que le permiten gestionar la navegación entre las pantallas. Un ejemplo es la biblioteca React Navigation.

1. Instalación de dependencias y configuración del proyecto

La principal ventaja de Expo es su amplio ecosistema. Así, para la navegación, podemos utilizar la herramienta proporcionada, que se llama Expo Router. Para ello es necesario instalar una serie de paquetes:

npx expo install expo-router react-native-safe-area-context 
react-native-screens expo-linking expo-constants expo-status-bar 
react-native-gesture-handler

A continuación, en el archivo package.json, cambie el valor de main de la siguiente manera:

{  
"main": "expo-router/entry"  
}

Por último, en el archivo app.json, es necesario especificar el scheme:

{  
"scheme": "my-app-scheme",  
}

El scheme hace referencia a un esquema de URI (Uniform Resource Identifier), que permite abrir la aplicación desde una URL. Por ejemplo, si tienes una aplicación llamada myapp, podrías definir un esquema como myapp y luego abrir tu aplicación desde un navegador u otra aplicación usando una URL como myapp://. Esto...

Añadir estilo

Añadir estilos a sus componentes es crucial para crear una experiencia de usuario atractiva y consistente. En React Native, el estilo se gestiona mediante hojas de estilo que se asemejan a las hojas de estilo CSS.

1. Utilizar estilos en línea

React Native no utiliza ni class ni classname para el estilo, a diferencia de React para la Web. En su lugar, React Native utiliza un sistema de estilo basado en JavaScript que es algo similar a CSS, pero con algunas diferencias notables.

Puede añadir estilos directamente en línea en sus componentes utilizando el atributo style. Las propiedades de estilo son similares a las de CSS, pero con nombres en formato camelCase.

import { View, Text, StyleSheet } from 'react-native';  
  
const MyComponent = () => {  
  return (  
    <View style={styles.container}>  
      <Text style={styles.text}>¡Hola, React Native!</Text>  
    </View>  
  );  
};  
  
const styles = StyleSheet.create({  
  container: {  
    flex: 1,  
    justifyContent: 'center',  
    alignItems: 'center',  
    backgroundColor: '#f2f2f2',  
  },  
  text:...