Erstellen eines DataBag-Kontexts, der Daten flexibel in Expo/React Native transportiert

Wenn Sie mit Parametern arbeiten, die in Ihrer gesamten App verfügbar sein sollen, greifen Sie höchstwahrscheinlich auf Props, Redux oder useContext zurück. Wie erstellen Sie eine Tasche mit Daten, auf die Sie in Ihrer gesamten App problemlos zugreifen können?

Definieren Sie zunächst Ihre Datenbeutelkontext und einen benutzerdefinierten Hook für einfachen Zugriff. Definieren Sie dann die DataBagProvider Komponente, die die Verwendungsstatus Hook, um den Status des Objekts zu verfolgen, und der Wert festlegen Funktion zum Aktualisieren des Status. Sie können dies ./context/DataBagContext.js aufrufen:

// ./context/DataBagContext.js import React, { createContext, useState, useContext } from 'react'; // DataBagContext erstellen const DataBagContext = createContext(); // Benutzerdefinierter Hook zum Verwenden von DataBagContext export const useDataBag = () => useContext(DataBagContext); export const DataBagProvider = ({ children }) => { const [data, setData] = useState({}); // Anfänglich ein leeres Objekt // Funktion zum Festlegen oder Aktualisieren von Kontextdaten const setValue = (key, value) => { setData(prevData => ({ ...prevData, // Alle vorhandenen Daten kopieren [key]: value // Neuen Schlüssel hinzufügen oder vorhandenen aktualisieren })); }; // Der Kontextwert umfasst das Datenobjekt und die Funktion setValue const contextValue = { data, setValue }; return ( {Kinder} ); };

Stellen Sie sicher, dass die Wurzel Ihres Komponentenbaums (oder eines Teilbaums, in dem Sie auf die Daten zugreifen müssen) mit DataBagProvider in App.js:

// App.js importiere { NavigationContainer } von '@react-navigation/native'; importiere { DataBagProvider } von './contexts/DataBagContext'; const App = () => { return ( {/* Ihre Bildschirme und Navigation kommen hierher */} ); }; Standard-App exportieren;

Nutzen Sie den Kontext in Ihren Komponenten mithilfe von useDataBag Haken:

// MyComponent.js importiere React von „react“; importiere { View, Text, Button } von „react-native“; importiere { useDataBag } von „./contexts/DataBagContext“; const MyComponent = () => { const { data, setValue } = useDataBag(); // Eine Funktion, um das Festlegen/Aktualisieren eines Werts im Kontext zu demonstrieren const handleUpdateValue = () => { setValue(„myKey“, „myNewValue“); }; return ( {/* Über das Datenobjekt abbilden und alle Variablen und Werte anzeigen */} {Object.entries(data).map(([key, value]) => ( {`${Schlüssel}: ${Wert}`} ))} ); }; exportiere Standard MyComponent;

Und von einem anderen Teil der App, beispielsweise einer Komponente, können Sie nun auf diese Daten zugreifen. RandomComponent.js

// RandomComponent.js importiere React von „react“; importiere { View, Text } von „react-native“; importiere { useDataBag } von „./contexts/DataBagContext“; const RandomComponent = () => { const { data } = useDataBag(); return ( {data.meinSchlüssel} ); }; exportiere Standard-RandomComponent;

Komponenten, die verbrauchen useDataBag wird die Möglichkeit haben, Daten dynamisch aus dem Kontext festzulegen und abzurufen.