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中的异步存储按照存储的值登录

1 个答案: