如何根据AsyncStorage配置React Native App登录后的启动首屏？

你的代码里有两个核心问题，导致设置InitialScreen为Home后不生效：

1. AsyncStorage.getItem是异步操作，你同步拿值根本不对
   你在constructor里直接写value = AsyncStorage.getItem('name')，这时候value不是存储的用户名，而是一个Promise对象！所以你的判断if (value !== null)永远为真，但这时候你还没真正拿到存在本地的用户数据，等于白判断。

2. 导航器初始化太早，改InitialScreen已经没用了
   你在组件外部就创建了RoutesNavigation，这时候InitialScreen还是undefined，所以导航器默认用了第一个定义的路由Login。等你在constructor里再改InitialScreen，导航器早就创建好了，根本不会理你这个变量的变化。

方案一：先拿存储值，再渲染导航器 #

把导航器的创建逻辑放到组件内部，先异步获取本地存储的用户信息，再根据结果渲染对应的导航配置：

import React, { Component } from 'react';
import { AsyncStorage, ActivityIndicator, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Login from './login';
import Home from './home';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      initialScreen: 'Login' // 默认先显示登录页
    };
  }

  componentDidMount() {
    // 异步获取存储的用户名
    AsyncStorage.getItem('name')
      .then(name => {
        // 如果有值，就把初始页面改成Home
        if (name !== null) {
          this.setState({ initialScreen: 'Home' });
        }
      })
      .catch(err => console.log('读取存储出错:', err))
      .finally(() => {
        // 不管成功失败，都结束加载状态
        this.setState({ isLoading: false });
      });
  }

  render() {
    // 加载过程中显示个加载圈，别让用户看着空白
    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" />
        </View>
      );
    }

    // 动态创建导航器，用状态里的initialScreen
    const RoutesNavigation = StackNavigator({
      Login: { screen: Login },
      Home: { screen: Home }
    }, {
      initialRouteName: this.state.initialScreen,
      navigationOptions: {
        header: false,
      }
    });

    return <RoutesNavigation />;
  }
}

方案二：用SwitchNavigator更规范推荐 #

React Navigation官方更推荐用SwitchNavigator来处理登录/首页的切换场景，它会重置整个导航栈，避免用户从首页返回登录页，逻辑更清晰：

import React, { Component } from 'react';
import { AsyncStorage, ActivityIndicator, View } from 'react-native';
import { SwitchNavigator, StackNavigator } from 'react-navigation';
import Login from './login';
import Home from './home';

// 先分别创建登录栈和首页栈
const LoginStack = StackNavigator({
  Login: { screen: Login }
}, {
  navigationOptions: { header: false }
});

const HomeStack = StackNavigator({
  Home: { screen: Home }
}, {
  navigationOptions: { header: false }
});

// 根导航器用SwitchNavigator，加个加载页用来检查登录状态
const AppNavigator = SwitchNavigator({
  AuthLoading: { screen: AuthLoadingScreen },
  Login: { screen: LoginStack },
  Home: { screen: HomeStack }
}, {
  initialRouteName: 'AuthLoading'
});

// 专门的加载页面：负责读取本地存储，判断跳转到哪个页面
class AuthLoadingScreen extends Component {
  componentDidMount() {
    this.checkLoginStatus();
  }

  checkLoginStatus = async () => {
    // 用async/await更直观地处理异步
    const name = await AsyncStorage.getItem('name');
    // 根据有没有用户名，跳转到对应页面
    this.props.navigation.navigate(name !== null ? 'Home' : 'Login');
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }
}

export default AppNavigator;

• 登录时AsyncStorage.setItem之后可以加个catch，处理存储失败的情况，比如：

AsyncStorage.setItem('name', responseJson.name)
  .catch(err => console.log('存储用户名失败:', err));

• 退出登录时，除了removeItem('name')，如果还有其他用户相关的存储，可以用AsyncStorage.clear()一次性清空，更彻底。

内容的提问来源于stack exchange，提问作者Vladimír