Javascript 如何使用AsyncStorage在react native中隐藏登录屏幕

当我已经使用异步存储登录时，我想隐藏登录屏幕并切换到其他屏幕

这是我的代码：

import React from 'react';

// Navigators
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';

import Login from './Login'
import Home from './Home'
import Control from './Control'
import Setting from './Setting'
import Info from './Info'

/* Home Stack */
const HomeStack = createStackNavigator({ Home: { screen: Home } });

/* ControlStack */
const ControlStack = createStackNavigator({ Control: { screen: Control } });

/* SettingStack */
const SettingStack = createStackNavigator({ Setting: { screen: Setting } });

/* InfoStack */
const InfoStack = createStackNavigator({ Info: { screen: Info } });

const Tabs = createBottomTabNavigator({
    HomeStack: { screen: HomeStack },
    ControlStack: { screen: ControlStack },
    SettingStack: { screen: SettingStack },
    InfoStack: { screen: InfoStack },
}, {
    navigationOptions: ({ navigation }) => ({
        tabBarIcon: ({ focused, tintColor }) => {
            const { routeName } = navigation.state;
            let iconName;
            if (routeName === 'HomeStack') {
                iconName = 'home';
            } else if (routeName === 'ControlStack') {
                iconName = 'sliders';
            } else if (routeName === 'SettingStack') {
                iconName = 'settings';
            } else if (routeName === 'InfoStack') {
                iconName = 'user';
                // iconName = `ios-options${focused ? '' : '-outline'}`;
            }

            return <Icons name={iconName} size={25} color={tintColor} />;
        },
    }),
    tabBarOptions: {
        activeTintColor: '#2fb581',
        inactiveTintColor: 'gray',
        style: {
            backgroundColor: '#f7f7f7',
            borderTopWidth: 1,
            borderTopColor: '#f7f7f7'
        },
        showLabel: false,
    },
    initialRouteName: 'HomeStack'
});

var res;
try {
    AsyncStorage.getItem('id_token').then((result) => {
        res = result;
    });
    alert(res);
} catch (error) {
    alert(error);
}

/* Login Stack */
const LoginStack = createStackNavigator({
    Login: { 
        screen: Login, 
        header: { visible: false }
    },
    Tabs: { 
        screen: Tabs,
        header: { visible: false }
    },
    Main: { 
        screen: Main,
        header: { visible: false }
    },
}, {
    initialRouteName: typeof res !== 'undefined' ? 'Tabs' : 'Login',
    headerMode: 'none'
});

export default LoginStack;

我已登录并拥有令牌，但我总是在AyncStorage结果中获得结果“未定义”

---

如何使AsyncStorage在我登录并显示Tabs屏幕时给出令牌结果？

首先制作一个

SplashScreen

。几乎所有的应用程序都有这个功能。 然后，您可以设置用户为null时的超时，否则会显示splash一段时间

AsyncStorage.getItem(PrefConstants.UserDetail).then(value => {
    if(value){
        this.changeView("ScreenDashboard");
    }
    else {
        this.setTimeout(() => {
        _this.changeView("ScreenLogin");
      }, 2000);
    }

changeView(value){
      const resetAction = StackActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName: value ? "ScreenDashboard" : "ScreenLoginFb"
        })
      ]
    });
    this.props.navigation.dispatch(resetAction);
}

如果在缓存中找到用户，此代码将立即加载仪表板。 如果用户为空，则将重定向到

LoginPage

---

注意SplashScreen将是应用程序的启动屏幕。

我强烈建议您使用React Navigation 2

欲了解更多信息，请阅读

• 用户打开应用程序

• 应用程序从持久性存储（例如，异步存储）加载一些身份验证状态

• 加载状态后，根据是否有效，将向用户显示身份验证屏幕或主应用程序 已加载身份验证状态

• 当用户注销时，我们清除身份验证状态并将其发送回身份验证屏幕

以下是一个例子：

const SwitchNavigator = createSwitchNavigator(
  {
    AuthLoading: RouterScreen,
    App: Tabs,
    Auth: LoginScreen
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

在RouterScreen中：

constructor(props) {
  super(props);
  AsyncStorage.getItem('id_token').then((userToken) => {
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
 }
}

---

设计类似于SplashScreen的RouterScreen或显示类似ActivityIndicator的内容。

如果您想更多地手动操作，我就是这样做的，我使用的不是AsyncStorage，而是一个普通的sqlite数据库，即使屏幕的逻辑是相同的。 我只在没有用户数据的情况下显示登录屏幕，如果它发现存储了一些数据，则直接进入下一个屏幕

main.js

import LoginScreen from './components/login';
  export default class Main extends Component {

   constructor(props) {
    super(props);

    this.state = {
      loggedIn: false,
    };
   }

  componentDidMount() {

     login=(user,pass)=>{
       //check if there is something already saved with AsyncStorage
         //if not, read the user and pass parameters
         //if there's something already saved
           console.log("Bienvenido");
           this.setState({
             loggedIn: true
           });
     }
  }


  render() {
     if(this.state.loggedIn === true){
        return (
          <View style={styles.container}>
          </View>
        );
      }
      else {
            return (
            <LoginScreen login={this.login.bind(this)}>
            </LoginScreen>
            );
   }

}

import LoginScreen from./components/login'；
导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
洛格丁：错，
};
}
componentDidMount（）{
登录=（用户，通过）=>{
//检查是否已使用异步存储保存了某些内容
//如果没有，请读取用户并传递参数
//如果有什么东西已经保存了
console.log（“Bienvenido”）；
这是我的国家({
洛格丁：是的
});
}
}
render（）{
if（this.state.loggedIn==true）{
返回(
);
}
否则{
返回(
);
}
}

这就是我将用户和密码从login.js发送到main.js的方式

<TouchableOpacity
  onPress={this.props.login.bind(this,this.state.username, this.state.password)}>
   <View style={styles.loginButton} >
     <Text style={styles.loginButtonText}>LOG IN</Text>
   </View>
</TouchableOpacity>

登录

---

大部分代码都是由我使用他的

如何设置

id\u令牌

int-asynstorages时生成的请参见零食>>“”

<TouchableOpacity
  onPress={this.props.login.bind(this,this.state.username, this.state.password)}>
   <View style={styles.loginButton} >
     <Text style={styles.loginButtonText}>LOG IN</Text>
   </View>
</TouchableOpacity>