web-dev-qa-db-ja.com

新しいコンテキストAPIは、React Nativeナビゲーターでどのように動作しますか？

React Navigatorを使用して、この例に従ってマルチスクリーンアプリを作成しました。

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

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

export default App;

新しい組み込みコンテキストapi を使用してグローバル構成状態を追加したいので、複数の画面から操作および表示できる一般的なデータをいくつか持つことができます。

問題は、コンテキストが明らかに共通の親コンポーネントを持つコンポーネントを必要とするため、コンテキストを子コンポーネントに渡すことができることです。

反応ナビゲーターによって管理されているため、私の知る限り、共通の親を共有しない画面を使用してこれを実装するにはどうすればよいですか？

reactjsreact-nativereact-navigationreact-context
13
Tom

このようにすることができます。

新しいファイルを作成：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>
);

オン index.jsルートコンポーネントをコンテキストプロバイダーコンポーネントでラップします。

<GlobalContextProvider>
  <App />
</GlobalContextProvider>

次に、画面でHomeScreen.jsこのようなコンシューマコンポーネントを使用します。

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);

複数のコンテキストプロバイダーを作成して懸念事項を分離し、必要な画面でHOCコンシューマーを使用することもできます。

13
Dede Hamzah