检查 AsyncStorage 中的值后导出反应本机 stackNavigator

Question

我有一个应用程序，一旦用户第一次打开该应用程序，就会存储一个令牌，我需要在应用程序启动时检查该令牌并创建导航器，

方法一

const getValue = async () => {
    try {
        value = await AsyncStorage.getItem('token').then((value) =>{
           console.log(value)
        })
    } catch (error) {
        console.log(error.message);
    }
};

if (token != undefined) {
    stackNavigator = createStackNavigator({
        Products: Products,
        Product: Product
    }, {
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false
        }
    })
} else {
    stackNavigator = createStackNavigator({
        Home:Home,
        Products: Products,
        Product: Product
    }, {
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false
        }
    })
}

在第一种方法中，它始终呈现主屏幕，即使令牌存储在应用程序中也是如此

第二种方法

const getValue = async () => {
    try {
        value = await AsyncStorage.getItem('token').then((value) =>{
            if(value == null){
                stackNavigator = createStackNavigator({
                    Home:Home,
                    Products: Products,
                    Product: Product
                }, {
                    headerMode: 'none',
                    navigationOptions: {
                        headerVisible: false
                    }
                })
            }else{
                stackNavigator = createStackNavigator({
                    Products: Products,
                    Product: Product
                }, {
                    headerMode: 'none',
                    navigationOptions: {
                        headerVisible: false
                    }
                })
            }
        })
    } catch (error) {
        console.log(error.message);
    }
};

这种方法抛出 Cannot read property of router undefined

有没有办法让它工作？

Navigation.js



export const getValue = async () => {
    let VALUE;
  try {

      await AsyncStorage.getItem('token')
      .then((value) =>{
          if(value == null){
            VALUE = stackNavigator = createStackNavigator({
                  Home:Home,
                  Products: Products,
                  Product: Product
              }, {
                  headerMode: 'none',
                  navigationOptions: {
                      headerVisible: false
                  }
              })
          }else{
            VALUE =  stackNavigator = createStackNavigator({
                  Products: Products,
                  Product: Product
              }, {
                  headerMode: 'none',
                  navigationOptions: {
                      headerVisible: false
                  }
              })
          }
      })
  } catch (error) {
      console.log(error.message);
  }

 return VALUE;

};

App.js

import { getValue } from './layout/navigation/Navigation';
let Navigation = createAppContainer(getValue());
class App extends React.Component {

    render() {
        return (<Navigation/>)
    }
}

Answer 1

创建路由

stackNavigator = createStackNavigator({
    Home:Home,
    Products: Products,
    Product: Product,
    Login : Login
  }, 
  {
    headerMode: 'none',
    initialRouteName : 'Home',  // provide initial route : app will open with Home page 
    navigationOptions: {
        headerVisible: false
    },
})

 // Export it with createAppContainer 
 export default createAppContainer(stackNavigator);

将其导入您的 App.js 并将其用作 <Router/>

import Router from 'Application/navigation/routes';

现在您可以做的是当用户登录时将他们的令牌存储到 AsyncStorage，然后重定向到主页。

在您的主页中，您可以在安装生命周期中添加您的令牌是否存在代码，如果您没有从存储中获取令牌，那么您可以导航到登录屏幕的路线。

检查 AsyncStorage 中的值后导出反应本机 stackNavigator

Export react native stackNavigator after checking for value in AsyncStorage

reactjs

react-native

redux

navigation

stack-navigator