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

Question

我使用create-react-native-app创建了一个简单的应用程序，并尝试在其中实现react-navigation。 应用程序的结构非常简单。开始时，应用程序将加载欢迎屏幕，用户可以决定注册或登录，如果已经记录，则用户将直接进入主主屏幕。 通过官方文档，我注意到不推荐使用Redux，如果没有反应导航的话，如何实现redux的几乎没有。

有没有人知道如何管理没有Redux的导航状态而不会生气？

Solution: Use withNavigation

根据官方文件：

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

LINK

因此，使用此组件可以访问任何组件的道具。

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',
  }
);

2. 在constructor类的AuthLoadingScreen中写入检查用户令牌。

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

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