Creación de un contexto DataBag que transporta datos de forma flexible en Expo / React Native

Cuando se trabaja con parámetros que desea que estén disponibles en toda la aplicación, lo más probable es que recurra a props, Redux o useContext. ¿Cómo crear un paquete con datos a los que pueda acceder fácilmente en toda la aplicación?

Primero, define tu Contexto de bolsa de datos y un gancho personalizado para un acceso fácil. Luego, define el Proveedor de bolsas de datos componente que utiliza el usarEstado gancho para realizar un seguimiento del objeto de estado y el establecerValor Función para actualizar el estado. Puedes llamar a ./context/DataBagContext.js:

// ./context/DataBagContext.js import React, { createContext, useState, useContext } from 'react'; // Crear DataBagContext const DataBagContext = createContext(); // Gancho personalizado para consumir DataBagContext export const useDataBag = () => useContext(DataBagContext); export const DataBagProvider = ({ children }) => { const [data, setData] = useState({}); // Inicialmente un objeto vacío // Función para establecer o actualizar datos de contexto const setValue = (key, value) => { setData(prevData => ({ ...prevData, // Copiar todos los datos existentes [key]: value // Agregar nueva o actualizar clave existente })); }; // El valor de contexto incluye el objeto de datos y la función setValue const contextValue = { data, setValue }; return ( {niños} ); };

Asegúrese de que la raíz de su árbol de componentes (o cualquier subárbol donde necesite acceder a los datos) esté envuelta con Proveedor de bolsas de datos En App.js:

// App.js importa { NavigationContainer } desde '@react-navigation/native'; importa { DataBagProvider } desde './contexts/DataBagContext'; const App = () => { return ( {/*Tus pantallas y navegación van aquí*/} ); }; exportar aplicación predeterminada;

Consuma el contexto en sus componentes mediante el uso de usarDataBag gancho:

// MyComponent.js import React from 'react'; import { View, Text, Button } from 'react-native'; import { useDataBag } from './contexts/DataBagContext'; const MyComponent = () => { const { data, setValue } = useDataBag(); // Una función para demostrar la configuración/actualización de un valor en el contexto const handleUpdateValue = () => { setValue('myKey', 'myNewValue'); }; return ( {/* Asignar al objeto de datos y mostrar todas las variables y valores */} {Object.entries(data).map(([key, value]) => ( {`${clave}: ${valor}`} ))} ); }; exportar predeterminado MyComponent;

Y desde otra parte de la aplicación, como un componente, ahora puedes acceder a estos datos. RandomComponent.js

// RandomComponent.js importa React desde 'react'; importa { Vista, Texto } desde 'react-native'; importa { useDataBag } desde './contexts/DataBagContext'; const RandomComponent = () => { const { datos } = useDataBag(); devolver ( {datos.miclave} ); }; exportar componente aleatorio predeterminado;

Componentes que consumen usarDataBag Tendrá la capacidad de configurar y recuperar datos del contexto de forma dinámica.

Última actualización: 1 de marzo de 2024