如何在没有 Redux、React Native 的情况下管理 React-Navigation 的状态

Question

我使用 create-react-native-app 创建了一个简单的应用程序，并尝试在其中实现 react-navigation。

该应用程序的结构非常简单。一开始，应用程序将加载欢迎屏幕，用户可以在其中决定注册或登录（如果已登录），然后用户将被直接引导到主主屏幕。

翻阅官方文档，我注意到不推荐使用 Redux，如果没有，如何使用 React Navigation 实现 Redux 的参考很少。

有谁知道如何在没有 Redux 的情况下管理导航状态而不生气？

解决方案：使用 withNavigation

根据官方文档：

withNavigation 是一个高阶组件，它将导航道具传递给一个包装的组件。当您无法将导航道具直接传递到组件中时，它很有用，或者不想在深度嵌套的孩子的情况下传递它。

LINK

因此使用这个组件可以访问任何组件的 props。

Answer 1

在 AuthLoadingScreen 中检查用户令牌（在您的情况下为欢迎屏幕）。 并根据用户令牌分散到SignUp 屏幕或Home。

例如...

1. 将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 of 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()
• 推：你会知道该怎么做。
• 流行：
• replace：用新的路由替换当前路由this.props.navigation.replace(yourscreen')

参考：https://reactnavigation.org/docs/en/auth-flow.html