Redux Persist+React Navigation：初始路由判断时状态未重hydrate求助

你遇到的核心问题很明确：React Navigation的栈初始化是在模块加载阶段同步执行的，这时候Redux-persist还没完成持久化状态的hydrate（恢复），所以你调用reduxStore.getState().config.autoLogin拿到的是reducer里定义的初始值，而非本地存储的持久化值。PersistGate确实会等待hydrate完成后再渲染内部组件，但导航栈的initialRouteName在PersistGate开始渲染前就已经确定了，所以自然起不到作用。

下面给你一个简单直观的解决方案：

方案：使用过渡页+动态跳转 #

我们可以先设置一个过渡页（比如启动页），让它在Redux状态完全恢复后，再根据autoLogin的值跳转到对应路由。

1. 创建过渡启动页 #

新建一个SplashScreen.js文件，用来处理状态判断和跳转：

import React, { Component } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { connect } from 'react-redux';
import NavigationService from './NavigationService';

class SplashScreen extends Component {
  componentDidMount() {
    // 此时Redux-persist已经完成hydrate，拿到的是持久化后的autoLogin值
    const targetRoute = this.props.autoLogin ? 'DrawerStack' : 'Home';
    // 通过你的NavigationService跳转到目标路由
    NavigationService.navigate(targetRoute);
  }

  render() {
    // 显示加载提示，避免页面空白
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }
}

// 映射Redux状态到组件props
const mapStateToProps = state => ({
  autoLogin: state.config.autoLogin
});

export default connect(mapStateToProps)(SplashScreen);

2. 修改导航栈配置 #

更新你的AppNavigation.js，把初始路由设为这个过渡页：

import SplashScreen from './SplashScreen';

const defaultNavigation = createStackNavigator({
  Splash: SplashScreen, // 添加过渡页
  Home: loginNavigation,
  DrawerStack: defaultDrawerNavigation
}, {
  initialRouteName: 'Splash', // 初始路由改为过渡页
  defaultNavigationOptions: { header: null },
} )

const AppContainer = createAppContainer(defaultNavigation);
export default AppContainer;

为什么这个方案可行？ #

PersistGate会等待Redux状态完全hydrate后，才渲染内部的AppContainer。当SplashScreen被渲染时，Redux里的config.autoLogin已经是本地存储的持久化值了，这时候再执行跳转逻辑，就能得到正确的初始路由。

这种方式不需要改动你现有的Redux-persist和NavigationService配置，逻辑清晰且容易维护。

内容的提问来源于stack exchange，提问作者zp26