如何基于Redux实现应用加载状态下全屏图片的显示？

嘿，这个需求很好实现，你只需要利用PersistGate的loading属性替换默认的加载占位即可，我给你一步步调整代码：

第一步：定义全屏加载组件 #

在你的App.js里先写一个专门的加载屏幕组件，用来展示全屏图片：

import React from 'react';
import { View, Image } from 'react-native';

// 自定义加载屏幕组件
const LoadingScreen = () => (
  <View style={{ flex: 1 }}>
    <Image 
      style={{ width: '100%', height: '100%', resizeMode: 'cover' }} 
      source={require("./assets/images/tc-logo.png")} 
    />
  </View>
);

这里的resizeMode可以根据图片需求调整：cover会让图片铺满屏幕并保持比例，contain则会完整显示图片并居中。

第二步：修改PersistGate的loading属性 #

把你原来PersistGate里的loading={null}替换成刚定义的LoadingScreen组件，修改后的完整App.js代码如下：

import React from 'react';
import { View, Image, ImageBackground } from 'react-native';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import AppNavigator from './path-to-your-app-navigator'; // 确保路径正确
import NavigationService from './path-to-your-navigation-service'; // 确保路径正确
import store from './path-to-your-store'; // 确保路径正确
import persistor from './path-to-your-persistor'; // 确保路径正确
import { fetchData } from './path-to-your-actions'; // 确保路径正确

// 自定义加载屏幕组件
const LoadingScreen = () => (
  <View style={{ flex: 1 }}>
    <Image 
      style={{ width: '100%', height: '100%', resizeMode: 'cover' }} 
      source={require("./assets/images/tc-logo.png")} 
    />
  </View>
);

export default class App extends React.Component {
  runInitialAppStartActions = () => {
    store.dispatch(fetchData());
  };

  render() {
    return (
      <ImageBackground source={require("./assets/images/TC_background.jpg")} style={styles.container} >
        <Provider store={store}>
          <PersistGate 
            loading={<LoadingScreen />} 
            persistor={persistor} 
            onBeforeLift={this.runInitialAppStartActions}
          >
            <AppNavigator 
              ref={navigatorRef => { 
                NavigationService.setTopLevelNavigator(navigatorRef); 
              }} 
            />
          </PersistGate>
        </Provider>
      </ImageBackground>
    );
  }
}

// 保留你原有的样式定义
const styles = {
  container: {
    flex: 1,
    // 其他原有样式...
  }
};

原理说明 #

PersistGate的作用是等待redux-persist完成数据持久化加载，在等待过程中会显示loading属性传入的组件。你之前设为null所以没有加载状态提示，现在替换成全屏图片组件后，就能在应用初始化、数据加载的过程中展示这张图片，直到onBeforeLift里的异步操作完成、persistor加载完毕，才会渲染后续的导航器内容，完全符合你的需求！

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