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

Question

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

方法 1

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

有没有办法让它工作？

导航.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，然后重定向到主页。

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