web-dev-qa-db-fra.com

Comment la nouvelle API de contexte devrait-elle fonctionner avec React Navigateur natif?

J'ai créé une application multi-écran en utilisant React Navigator en suivant cet exemple:

import {
  createStackNavigator,
} from 'react-navigation';

const App = createStackNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },
});

export default App;

Maintenant, je voudrais ajouter un état de configuration global en utilisant la nouvelle API de contexte intégré , afin que je puisse avoir des données communes qui peuvent être manipulées et affichées à partir de plusieurs écrans.

Le problème est que le contexte nécessite apparemment des composants ayant un composant parent commun, de sorte que le contexte peut être transmis aux composants enfants.

Comment puis-je implémenter cela en utilisant des écrans qui ne partagent pas un parent commun à ma connaissance, car ils sont gérés par React Navigator?

reactjsreact-nativereact-navigationreact-context
13
Tom

Vous pouvez le faire comme ça.

Créer un nouveau fichier: GlobalContext.js

import React from 'react';

const GlobalContext = React.createContext({});

export class GlobalContextProvider extends React.Component {
  state = {
    isOnline: true
  }

  switchToOnline = () => {
    this.setState({ isOnline: true });
  }

  switchToOffline = () => {
    this.setState({ isOnline: false });
  }

  render () {
    return (
      <GlobalContext.Provider
        value={{
          ...this.state,
          switchToOnline: this.switchToOnline,
          switchToOffline: this.switchToOffline
        }}
      >
        {this.props.children}
      </GlobalContext.Provider>
    )
  }
}

// create the consumer as higher order component
export const withGlobalContext = ChildComponent => props => (
  <GlobalContext.Consumer>
    {
      context => <ChildComponent {...props} global={context}  />
    }
  </GlobalContext.Consumer>
);

Sur index.js envelopper votre composant racine avec le composant fournisseur de contexte.

<GlobalContextProvider>
  <App />
</GlobalContextProvider>

Puis sur votre écran HomeScreen.js utilisez le composant consommateur comme ceci.

import React from 'react';
import { View, Text } from 'react-native';
import { withGlobalContext } from './GlobalContext';

class HomeScreen extends React.Component {
  render () {
    return (
      <View>
        <Text>Is online: {this.props.global.isOnline}</Text>
      </View>
    )
  }
}

export default withGlobalContext(HomeScreen);

Vous pouvez également créer plusieurs fournisseurs de contexte pour séparer vos préoccupations et utiliser le consommateur HOC sur l'écran de votre choix.

13
Dede Hamzah