如果存储了令牌，导航到主屏幕--本机o.w。登录屏幕

Question

已经过了几天了，我被困在这样一个时刻，作为一个初学者，我不知道该如何前进。在我的routes/main.js中，我有一个堆栈导航器：

export const createRootNavigator = (loggedIn = false) => {
    return StackNavigator(
        {
            LoggedIn: {
                screen: LoggedIn
            },
            LoggedOut: {
                screen: LoggedOut
            }
        },
        {
            headerMode: loggedIn ? '' : 'none',
            mode: Platform.OS === 'ios' ? 'modal' : 'card',
            initialRouteName: loggedIn ? "LoggedIn" : "LoggedOut"
        }
    );
  }

App.js

import RootNavigation from './root';

const  App = () => ( {
  render() {
    return (
      <Provider store = {store} >
        <View style={styles.container}>
          <RootNavigation/>
        </View>
      </Provider>
    );
  }
})

root.js

import React, {Component} from 'react';
import { AsyncStorage} from 'react-native';
import { createRootNavigator} from './src/routes/main';

let RootNavigation = createRootNavigator(true);

export default class Root extends Component {
    render() {
        return ( 
            < RootNavigation / >
        );
    }
}

在root.js let RootNavigation = createRootNavigator(true);中，当前正在通过true，但可能是使用AsyncStorage.getItem('authToken');的true or false。

所以我在我的root.js中实现了这样的目标

注意:代码下面的是不正确的，但它解释了我想要的。

import React, {Component} from 'react';
import {AsyncStorage} from 'react-native';
import { createRootNavigator} from './src/routes/main';

// Not sure about the code placement of this part.
let RootNavigation;
let token = await AsyncStorage.getItem('authToken');
if(token) {
    RootNavigation = createRootNavigator(true);
}else {
    RootNavigation = createRootNavigator(false);
}

export default class Root extends Component {

    render() {
        return ( 
            < RootNavigation / >
        );
    }
}

如何实现这一功能？我在我的项目中使用react-redux和react-thunk。救命啊！！

Answer 1

而不是根据用户是否登录而呈现不同的RootNavigations。您可以考虑使用Splash屏幕初始化堆栈，该屏幕检查是否有经过身份验证的用户。由于您使用的是redux，存储这些信息的一个方便的地方可能在您的存储区中。

一旦您的Splash屏幕挂载，并且异步标识了是否有活动用户，您就可以推送到登录屏幕或第一个通过身份验证的屏幕。

屏幕上的标题根据用户是否通过身份验证是否最好地使用静态navigationOptions方法配置，而不是在堆栈上配置它。

希望这能帮上忙！如果你有任何问题，请告诉我。