App.js 中的异步存储根据存储值登录

Question

这是我在 app.js 中的实现，我试图根据用户是否登录的值有条件地设置初始屏幕。

但是在从 AsyncStorage 返回值之前调用该方法。

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import Login from './screens/Login';
import Home from './screens/Home';
import { AppInit } from './utils/AppInit';

export default AppInit({
  initScreen: AsyncStorage.getItem("UserDetailsStored").then((value) => { console.log("stored value ", value); value == "false" ? "Login" : "Home" }),
  screens: {
    Login,
    Home,
    Screen1,
    Screen2,
    Profile
  }
});

AppInit代码，使用react-native-router-flux

const AppInit = (screen) => {
    return App = () => {
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <NetworkProvider>
                        <Router>
                            <Stack key="root">
                                {_.map(screen.screens, (name, key) => {
                                    return <Scene initial={key == screen.initScreen ? true : false} hideNavBar key={key} component={name} />
                                })}
                            </Stack>
                        </Router>
                    </NetworkProvider>
                </PersistGate>
            </Provider>
        )
    }
}

我尝试了更改 app.js 的方法，但它也不起作用。谢谢

Answer 1

我建议使用一个额外的屏幕来检查登录。

检查那里的 asyncStorage 值。因为 AsyncStorage 需要时间来获取数据。

因此您需要先检查是否已获取数据，然后再检查您的登录数据。如果未获取数据，则在检查登录后在屏幕上显示您想要的图像、数据或任何内容导航到您想要的屏幕。

看到这个，将此屏幕用作加载应用程序的第一个屏幕。

假设我们有 SyncScreen.

import React, { Component } from 'react'
import { Text, View, AsyncStorage } from 'react-native'

export default class SyncScreen extends Component {
  componentWillMount=()=>{
 AsyncStorage.getItem("UserDetailsStored")
 .then((value) => { 
    if(value){
      // navigate to somewhere.....
    }
    else{
      // navigate to login..
    }
  }
),
}
  render() {
    return (
      <View>
        <Text> Wait a minute</Text>
      </View>
    )
  }
}

App.js 中的异步存储根据存储值登录

Asyncstorage in App.js to login as per stored value

react-native

asyncstorage