2

已经有几天了，我被困在一个点，作为一个初学者，我不知道如何继续前进。在我的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"
        }
    );
  }

应用程序.js

import RootNavigation from './root';

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

根.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);truetrue or falseAsyncStorage.getItem('authToken');

所以我在我的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请帮忙！！

4

1 回答 1

1

而不是根据用户是否登录来呈现不同的 RootNavigation。您可以查看使用启动画面来初始化您的堆栈，以检查是否存在经过身份验证的用户。由于您使用的是 redux，因此存储此信息的方便位置可能在您的商店中。

一旦您的启动屏幕安装并且您已经异步识别是否有活动用户，您就可以推送到登录屏幕或第一个经过身份验证的屏幕。

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

希望有帮助！如果您有任何问题，请告诉我。

于 2017-12-23T21:30:26.510 回答