Обертывание React Native с помощью провайдера контекста

Question

Я следовал некоторому простому учебнику ( полный рабочий исходный код ), чтобы понять, как использовать контекст React вместе с обработкой аутентификации в моем приложении React Native.

В этом примере используются компоненты с сохранением состояния для представлений и обработка маршрутизации приложения внутри самого компонента, например, в SignInScreen.js:

/* SignInScreen.js */

export default class SignInScreen extends React.Component {
    static navigationOptions = {
        title: 'Please sign in',
    };

    _signInAsync = async (saveToken) => {
        saveToken()
            .then((data) => {
                // ROUTE USER TO "PROTECTED" PART OF THE APP
                this.props.navigation.navigate('App');
            })
            .catch((error) => {
                this.setState({ error })
            })

    };

    render() {
        return (
            <View style={styles.container}>
                <MyContext.Consumer>
                    {context => ((
                        <Button title="Sign in!" onPress={() => this._signInAsync(context.saveToken)} />
                    ))}
                </MyContext.Consumer>
            </View>
        );
    }

};

Я пытался преобразовать этот компонентв компонент функции и переместите логику входа в мой провайдер контекста следующим образом:

/* SignInScreen.js - MODIFIED */

import React from 'react';
import { Button, View } from 'react-native';

import { MyContext } from '../Provider';

export default const LoginScreen = () => {
  return (
    <View>
      <MyContext.Consumer>
        {context => {
          return (
            <Button
              onPress={() => context.signIn()}
              title="Sign In"
            />
          )
        }
      }
      </MyContext.Consumer>
    </View>
  )
};



/* Provider.js */

import React from 'react';
import { AsyncStorage } from 'react-native';

export const MyContext = React.createContext();

export default class MyProvider extends React.Component {
    constructor(props) {
      super(props);
      this.getToken = () => AsyncStorage.getItem('userToken');
      this.saveToken = () => AsyncStorage.setItem('userToken', 'abc');
      this.removeToken = () => AsyncStorage.removeItem('userToken');

      this.signIn = () => {
        this.saveToken()
          .then((data) => {
            // this.props.navigation DOES NOT EXIST!!! :(
            this.props.navigation.navigate('App');
          })
          .catch((error) => this.setState({ error }));
      };

      this.state = {
        token: '',
        signIn: this.signIn,
      };
    }

    componentWillMount() {
        AsyncStorage.getItem('userToken')
            .then((token) => {
                this.setState({ token })
            })
            .catch(error => {
                this.setState({ error })
            })
    }

    render() {
        return (
            <MyContext.Provider value={this.state}>
                {this.props.children}
            </MyContext.Provider>
        );
    }
}

Когда я нажимаю эту кнопку «Войти», мой провайдер выдает ошибку при попытке перенаправить пользователя (this.props.navigation.navigate('App');), потому чтоthis.props.navigation не существует.

Насколько я понял, это происходит из-за того, что я неправильно обернул свое приложение своим контекстом.

Это мой основной App.js файл:

/* App.js */

import React from 'react';
import { View } from 'react-native';

import MyContext from './Provider';
import AppNavigator from './navigation/AppNavigator';


export default class App extends React.Component {
  render() {
    return (
      <MyContext>
        <View>
          <AppNavigator />
        </View>
      </MyContext>
    );
  }
}

и мои AppNavigator.js:

/* AppNavigator.js */

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import AuthLoadingScreen from '../screens/AuthLoadingScreen';
import Auth from './AuthNavigator';
import App from './AppTabNavigator';


export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    Auth,
    App,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

(AuthNavigator и AppTabNavigator содержат только createStackNavigator() с моими заданными в нем экранами.)

Мой вопрос: как мне обернуть это приложение своим контекстом, чтобы Contex• Поставщик всегда знает о navigation prop, поэтому я мог бы обрабатывать вход и выход и маршрутизацию пользователя из самого поставщика контекста?

Answer 1

Я решил это, используя NavigationActions, довольно полезный встроенный модуль, разработанный для этой цели.