Quando hai a che fare con parametri che vuoi siano disponibili in tutta la tua app, molto probabilmente ti rivolgi a props, Redux o useContext. Come creare un unico sacchetto con dati a cui puoi accedere facilmente in tutta la tua app?
Per prima cosa, definisci il tuo Contesto DataBag e un gancio personalizzato per un facile accesso. Quindi, definisci il Fornitore di sacchi di dati componente che utilizza il UsaStato hook per tenere traccia dell'oggetto di stato e il impostaValore funzione per aggiornare lo stato. Puoi chiamare questo ./context/DataBagContext.js:
// ./context/DataBagContext.js import React, { createContext, useState, useContext } from 'react'; // Crea DataBagContext const DataBagContext = createContext(); // Hook personalizzato per l'utilizzo di DataBagContext export const useDataBag = () => useContext(DataBagContext); export const DataBagProvider = ({ children }) => { const [data, setData] = useState({}); // Inizialmente un oggetto vuoto // Funzione per impostare o aggiornare i dati di contesto const setValue = (key, value) => { setData(prevData => ({ ...prevData, // Copia tutti i dati esistenti [key]: value // Aggiungi una nuova chiave o aggiorna quella esistente })); }; // Il valore di contesto include l'oggetto dati e la funzione setValue const contextValue = { data, setValue }; return ( {bambini} (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17) (17) (18) (19) (20) (21) (22) (23) (24) (25) (25) (26) (27 ...Assicurati che la radice del tuo albero dei componenti (o qualsiasi sottoalbero in cui hai bisogno di accedere ai dati) sia racchiusa con Fornitore di sacchi di dati nell'App.js:
// App.js importa { NavigationContainer } da '@react-navigation/native'; importa { DataBagProvider } da './contexts/DataBagContext'; const App = () => { return ( {/* Le tue schermate e la tua navigazione vanno qui */} ); }; esporta l'app predefinita;Consuma il contesto nei tuoi componenti utilizzando il usaDataBag gancio:
// 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 funzione per dimostrare l'impostazione/l'aggiornamento di un valore nel contesto const handleUpdateValue = () => { setValue('myKey', 'myNewValue'); }; return ( {/* Mappa l'oggetto dati e visualizza tutte le variabili e i valori */} {Object.entries(data).map(([key, value]) => ( {`${chiave}: ${valore}`} ))} ); }; esporta il valore predefinito MyComponent;E da un'altra parte dell'app, come un componente, ora puoi accedere a questi dati. RandomComponent.js
// RandomComponent.js importa React da 'react'; importa { Visualizza, Testo } da 'react-native'; importa { usaDataBag } da './contexts/DataBagContext'; const RandomComponent = () => { const { dati } = usaDataBag(); restituisci ( {dati.miachiave} ); }; esporta il componente casuale predefinito;Componenti che consumano usaDataBag avrà la capacità di impostare e recuperare dinamicamente i dati dal contesto.
Italiano 
English 
Deutsch 
Nederlands 
Français 
Español 
Svenska