Een DataBag Context maken die gegevens flexibel meeneemt in Expo / React Native

Wanneer u te maken hebt met parameters die u in uw hele app beschikbaar wilt hebben, wendt u zich waarschijnlijk tot props, Redux of useContext. Hoe maakt u één tas met gegevens die u eenvoudig in uw hele app kunt raadplegen?

Definieer eerst uw GegevensBagContext en een aangepaste haak voor eenvoudige toegang. Definieer vervolgens de GegevensBagProvider component die gebruik maakt van de gebruikStatus haak om de status van het object bij te houden, en de setwaarde functie om de status bij te werken. U kunt dit ./context/DataBagContext.js aanroepen:

// ./context/DataBagContext.js import React, { createContext, useState, useContext } from 'react'; // DataBagContext maken const DataBagContext = createContext(); // Aangepaste hook voor het gebruiken van DataBagContext export const useDataBag = () => useContext(DataBagContext); export const DataBagProvider = ({ children }) => { const [data, setData] = useState({}); // Aanvankelijk een leeg object // Functie om contextgegevens in te stellen of bij te werken const setValue = (key, value) => { setData(prevData => ({ ...prevData, // Kopieer alle bestaande gegevens [key]: value // Voeg een nieuwe toe of werk een bestaande sleutel bij })); }; // De contextwaarde bevat het gegevensobject en de setValue-functie const contextValue = { data, setValue }; return ( {kinderen} ); };

Zorg ervoor dat de root van uw componentenboom (of een subboom waar u toegang tot de gegevens nodig hebt) is ingepakt met GegevensBagProvider in App.js:

// App.js import { NavigationContainer } van '@react-navigation/native'; import { DataBagProvider } van './contexts/DataBagContext'; const App = () => { return ( {/* Hier komen uw schermen en navigatie */} ); }; exporteer standaard-app;

Gebruik de context in uw componenten door gebruik te maken van de gebruikDataBag haak:

// MyComponent.js import React van 'react'; import { View, Text, Button } van 'react-native'; import { useDataBag } van './contexts/DataBagContext'; const MyComponent = () => { const { data, setValue } = useDataBag(); // Een functie om het instellen/bijwerken van een waarde in de context te demonstreren const handleUpdateValue = () => { setValue('myKey', 'myNewValue'); }; return ( {/* Map over het data-object en geef alle variabelen en waarden weer */} {Object.entries(data).map(([key, value]) => ( {`${sleutel}: ${waarde}`} ))} ); }; exporteer standaard MyComponent;

En vanuit een ander deel van de app, zoals een component, kunt u nu toegang krijgen tot deze gegevens. RandomComponent.js

// RandomComponent.js importeer React van 'react'; importeer { View, Text } van 'react-native'; importeer { useDataBag } van './contexts/DataBagContext'; const RandomComponent = () => { const { data } = useDataBag(); return ( {data.mijnSleutel} ); }; exporteer standaard RandomComponent;

Componenten die verbruiken gebruikDataBag zal de mogelijkheid hebben om dynamisch gegevens in te stellen en op te halen uit de context.

Laatst bijgewerkt op 1 maart 2024