Funciones avanzadas con React Native

Introducción

React Native ofrece acceso directo a las funcionalidades avanzadas de los dispositivos móviles, lo que se traduce en una experiencia de usuario notablemente mejorada. Estas funcionalidades incluyen técnicas como el uso de la geolocalización y el acceso a la cámara.

Además, una de las principales ventajas de estas funcionalidades avanzadas es su compatibilidad multiplataforma. Las funcionalidades desarrolladas para una plataforma, ya sea iOS o Android, a menudo pueden ser reutilizadas en la otra plataforma. Esto simplifica el desarrollo, reduce los costes y permite llegar a una audiencia más amplia, aunque à veces sea necesario adaptar ciertos desarrollos para adecuarlos a la plataforma de destino.

En esta sección, exploraremos una serie de ejemplos concretos de uso, como la geolocalización y el acceso a los contactos. También descubriremos cómo aprovechar la API context para ofrecer a los usuarios la opción de elegir entre un tema claro y uno oscuro.

Utilizar la geolocalización y acceder a los contactos

1. Utilizar la geolocalización

La geolocalización permite a su aplicación recuperar la posición GPS del dispositivo. Puedes utilizarla para mostrar información basada en la ubicación del usuario.

a. Instalación del módulo de geolocalización

Instale el módulo de geolocalización utilizando npm :

npx expo install expo-location

b. Utilización de la geolocalización

En nuestro proyecto React Native con Expo, vimos en el capítulo anterior que es muy sencillo implementar el enrutamiento. Simplemente tenemos que crear un nuevo archivo en la carpeta /app.

Vamos a crear un nuevo archivo llamado location.js que será una nueva pantalla en la que simplemente mostraremos las coordenadas GPS del dispositivo:

// location.js  
import React, { useState, useEffect } from 'react';  
import { Text, View } from 'react-native';  
import * as Location from 'expo-location';  
  
export default function LocationPage() {  
  const [location, setLocation] = useState(null);  
  const [errorMsg, setErrorMsg] = useState(null);  
  
  useEffect(() => {  
    (async () => {  
      let { status } = await Location.requestForegroundPermissionsAsync();  
      if (status !== 'granted') {  
        setErrorMsg('Permission to access location was denied');  
        return;  
      }  
  
      let location = await Location.getCurrentPositionAsync({});  
      setLocation(location);  
    })();  
  }, []);  
  
  let text = 'Cargando..';  ...

Ejemplo: utilización de un tema claro u oscuro con la API de contexto

La posibilidad de cambiar entre un tema claro y uno oscuro se ha convertido en una característica esencial de las aplicaciones modernas. Puede implementar esta funcionalidad utilizando el contexto (Context API) de React. Este ejemplo nos mostrará que, incluso en el desarrollo móvil, tenemos todas las herramientas de React.js a nuestra disposición. Para este ejemplo, generamos un nuevo proyecto con el comando :

npx create-expo-app ThemeContextProjet

Crear un Context para el tema

Comience por crear un contexto para gestionar el estado del tema dentro de la aplicación. Este es el archivo ThemeContext.js:

import React, { createContext, useState } from 'react';  
  
export const ThemeContext = createContext();  
  
export const ThemeProvider = ({ children }) => {  
  const [isDarkTheme, setIsDarkTheme] = useState(false);  
  
  const toggleTheme = () => {  
    setIsDarkTheme(!isDarkTheme);  
  };  
  
  return (  
    <ThemeContext.Provider value={{ isDarkTheme, toggleTheme }}>  
      {children}  
    </ThemeContext.Provider>  ...

Conclusión

En este capítulo, hemos explorado una serie de funciones avanzadas que ofrece React Native y, en particular, Expo, que permiten crear aplicaciones móviles enriquecidas.

Analizamos en detalle el uso de funciones como la geolocalización y el acceso a contactos, que permiten personalizar la experiencia del usuario. También implementamos un tema claro/oscuro utilizando la API Context, que ofrece a los usuarios la posibilidad de personalizar el aspecto de la aplicación según sus preferencias individuales.

A través de esta exploración, ha desarrollado una comprensión del poder inherente de React Native para el desarrollo de aplicaciones móviles modernas. Profundizar sus habilidades en React Native le dará una gama más amplia de habilidades, con el mínimo esfuerzo.

Para saber más, le recomendamos familiarizarse con Expo si el tema le interesa. La documentación cubre muchos más casos de uso.