Как управлять состоянием React-Navigation без Redux, React Native - PullRequest
Новая
       25

Как управлять состоянием React-Navigation без Redux, React Native

0 голосов
/ 16 сентября 2018

Я создал простое приложение, используя create-Reaction-native-app и пытаясь реализовать в нем реагирующую навигацию.

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

Просмотр официальной документации Iзаметил, что использование Redux не рекомендуется, а также есть небольшая справка о том, как реализовать Redux с реагирующей навигацией, если ее нет.


Кто-нибудь знает, как управлять состоянием навигации без Redux беззлиться?

Решение: Используйте withNavigation

Согласно официальным документам:

withNavigation - компонент более высокого порядка, который передает навигационную опору в завернутый Компонент.Это полезно, когда вы не можете передать навигационную опору напрямую в компонент или не хотите передавать ее в случае глубоко вложенного дочернего элемента.

LINK

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

1 Ответ

0 голосов
/ 17 сентября 2018

Проверьте токен пользователя в AuthLoadingScreen (экран приветствия в вашем случае). И расходятся до SignUp экрана или Home в зависимости от токена пользователя.

Например ...

  1. Wrap WelcomeScreen(AuthLoading), Auth(SignUp, SignIn) и Home( and others screen) - createStackNavigator.

App.js 

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

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);
  1. Запись проверочного токена пользователя в constructor из AuthLoadingScreen Class.

AuthLoadingScreen.js 

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

class AuthLoadingScreen extends React.Component {
  constructor(props) {
    super(props);
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

Важная вещь - как обернуть экраны в навигации как стопку, ящик и касание.

И вы можете управлять стеком различными способами, как

  • навигация: переход на другой экран this.props.navigation.navigate('yourscreen')
  • goBack: закрыть активный экран и вернуться назад this.props.navigation.goBack()

Особенно больше контроля, когда экран включен в стек.

  • popToTop: перейти на вершину стека this.props.navigation.popToTop()
  • толчок: ты будешь знать, что делать.
  • pop:
  • заменить: заменить текущий маршрут на новый this.props.navigation.replace(yourscreen')

Ссылка: https://reactnavigation.org/docs/en/auth-flow.html

...