集成redux-persist后React Native应用出现白屏问题求助

嘿，我看你在集成redux-persist后遇到了App白屏的问题，结合你贴的代码，我发现几个可能的问题点，咱们一步步来修复：

1. Store导出方式不匹配导致的调用错误 #

你的App.js里用storeConfig()来获取store和persistor，但你的store.js是直接导出变量而非函数，这会直接导致调用报错——毕竟storeConfig不是函数啊！这大概率是白屏的核心原因之一。

咱们把store的导出改成函数形式，和App.js的调用逻辑匹配：

修正后的store.js：

import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' 
import logger from 'redux-logger';
import reducers from '../reducers';

const persistConfig = {
  key: 'root',
  storage,
};

const pReducer = persistReducer(persistConfig, reducers);
// 别忘了用applyMiddleware包裹logger，不然createStore会识别错误
const store = createStore(pReducer, applyMiddleware(logger));
const persistor = persistStore(store);

// 改成导出函数，和App.js的调用方式对齐
export default function storeConfig() {
  return { store, persistor };
}

2. 双重加载逻辑可能引发冲突 #

你同时用了AppLoading和PersistGate的loading组件，两者的加载顺序可能会导致渲染逻辑混乱。咱们确保资源加载完成后，再渲染Redux相关的内容：

修正后的App.js关键部分：

import React from 'react';
import { AppLoading, Asset, Font } from 'expo';
import { PersistGate } from 'redux-persist/integration/react';
import { Ionicons } from '@expo/vector-icons';
import { Provider } from 'react-redux';
import storeConfig from './config/store';
import RootNavigation from './navigation/RootNavigation';
import Splash from './screens/Splash'

const {persistor, store} = storeConfig();

class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  _loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        // 这里放你的静态资源路径，比如图片等
      ]),
      Font.loadAsync({
        ...Ionicons.font,
        // 如果你有自定义字体，放在这里
      }),
    ]);
  };

  _handleLoadingError = error => {
    console.warn('资源加载出错:', error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };

  render() {
    // 先等所有静态资源加载完，再渲染Redux和持久化组件
    if (!this.state.isLoadingComplete) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    }

    return (
      <Provider store={store}>
        <PersistGate loading={<Splash />} persistor={persistor}>
          <RootNavigation />
        </PersistGate>
      </Provider>
    );
  }
}

export default App;

3. 其他排查方向 #

如果上面的修改还是没解决问题，可以试试这几个点：

• 更换存储引擎：Expo环境下有时候默认的storage会有兼容问题，你可以换成@react-native-async-storage/async-storage（安装后导入替换原来的storage），或者用expo-secure-store存储敏感数据。
• 检查Reducer的可序列化性：redux-persist要求state必须是可序列化的，你的reducers里不能返回函数、Symbol这类无法序列化的内容，否则会触发异常导致白屏。
• 查看控制台错误：打开Expo开发工具的控制台，看看具体的报错信息——这是定位问题最快的方式，比如有没有未捕获的语法错误或者持久化失败的提示。
• 清空持久化存储：如果是旧的持久化数据导致的问题，可以在开发环境临时调用persistor.purge()来清空存储，测试是否能正常启动。

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