Création d'un contexte DataBag qui transporte les données de manière flexible dans Expo / React Native

Lorsque vous avez affaire à des paramètres que vous souhaitez rendre disponibles dans toute votre application, vous vous tournez probablement vers les accessoires, Redux ou useContext. Comment créer un sac contenant des données auxquelles vous pouvez facilement accéder dans toute votre application ?

Tout d’abord, définissez votre Contexte du sac de données et un crochet personnalisé pour un accès facile. Ensuite, définissez le Fournisseur de sacs de données composant qui utilise le utiliserÉtat crochet pour garder une trace de l'objet d'état et du définirValeur fonction pour mettre à jour l'état. Vous pouvez appeler ceci ./context/DataBagContext.js :

// ./context/DataBagContext.js import React, { createContext, useState, useContext } from 'react'; // Créer un DataBagContext const DataBagContext = createContext(); // Hook personnalisé pour consommer un DataBagContext export const useDataBag = () => useContext(DataBagContext); export const DataBagProvider = ({ children }) => { const [data, setData] = useState({}); // Initialement un objet vide // Fonction pour définir ou mettre à jour les données de contexte const setValue = (key, value) => { setData(prevData => ({ ...prevData, // Copier toutes les données existantes [key]: value // Ajouter une nouvelle clé ou mettre à jour une clé existante })); }; // La valeur de contexte inclut l'objet de données et la fonction setValue const contextValue = { data, setValue }; return ( {enfants} ); };

Assurez-vous que la racine de votre arborescence de composants (ou de toute sous-arborescence dans laquelle vous avez besoin d'accéder aux données) est encapsulée avec Fournisseur de sacs de données dans App.js :

// App.js importe { NavigationContainer } depuis '@react-navigation/native'; importe { DataBagProvider } depuis './contexts/DataBagContext'; const App = () => { return ( {/* Vos écrans et votre navigation se trouvent ici */} ); }; exportation par défaut de l'application ;

Consommez le contexte dans vos composants en utilisant le utiliserDataBag crochet:

// MyComponent.js import React from 'react'; import { View, Text, Button } from 'react-native'; import { useDataBag } from './contexts/DataBagContext'; const MyComponent = () => { const { data, setValue } = useDataBag(); // Une fonction pour démontrer la définition/mise à jour d'une valeur dans le contexte const handleUpdateValue = () => { setValue('myKey', 'myNewValue'); }; return ( {/* Mapper l'objet de données et afficher toutes les variables et valeurs */} {Object.entries(data).map(([key, value]) => ( {`${clé}: ${valeur}`} ))} ); }; export par défaut MyComponent;

Et depuis une autre partie de l'application, comme un composant, vous pouvez désormais accéder à ces données. RandomComponent.js

// RandomComponent.js importer React depuis 'react'; importer { Vue, Texte } depuis 'react-native'; importer { useDataBag } depuis './contexts/DataBagContext'; const RandomComponent = () => { const { données } = useDataBag(); return ( {data.maClé} ); }; exportation par défaut RandomComponent;

Composants qui consomment utiliserDataBag aura la capacité de définir et de récupérer des données du contexte de manière dynamique.

Dernière mise à jour le 1er mars 2024