如何在react-native中借助react-native-bootsplash实现闪屏多图片使用？

核心思路 #

react-native-bootsplash本身原生层仅支持单张静态启动图，因此采用「原生启动图+JS层自定义第二张闪屏」的组合方案实现需求：react-native-bootsplash负责原生系统启动阶段的第一张闪屏（解决启动白屏问题），待APP上下文初始化完成后，在JS层展示第二张自定义闪屏，第二张闪屏展示结束后再进入应用主页面。

前置准备 #

• 已完成react-native-bootsplash的基础配置，第一张闪屏可正常展示
• 第二张闪屏图已存入项目src/assets/目录

代码实现步骤 #

步骤1：封装第二张闪屏组件 #

新建src/components/SplashSecond.js文件，代码如下：

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

const SplashSecond = () => {
  return (
    <View style={styles.container}>
      {/* 保持状态栏样式和原生启动页一致 */}
      <StatusBar barStyle="dark-content" backgroundColor="#fff" translucent={false} />
      <Image 
        source={require('../assets/second-splash.png')}
        style={styles.splashImg}
        resizeMode="cover"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // 背景色和原生启动页保持完全一致，避免切换跳变
    backgroundColor: '#ffffff'
  },
  splashImg: {
    width: '100%',
    height: '100%'
  }
});

export default SplashSecond;

步骤2：修改入口App.js逻辑 #

调整启动时序，控制两张闪屏的切换逻辑：

import React, { useState, useEffect } from 'react';
import BootSplash from 'react-native-bootsplash';
import SplashSecond from './src/components/SplashSecond';
import MainStack from './src/navigation/MainStack'; // 替换为你的应用主路由入口

const App = () => {
  const [showSecondSplash, setShowSecondSplash] = useState(false);
  const [isAppReady, setIsAppReady] = useState(false);

  useEffect(() => {
    const appInit = async () => {
      // 此处可添加应用初始化逻辑：全局配置拉取、用户登录态校验等
      
      // 隐藏原生第一张闪屏，同时展示第二张闪屏
      await BootSplash.hide({ fade: true });
      setShowSecondSplash(true);

      // 控制第二张闪屏展示时长，可替换为业务逻辑回调（如首屏数据请求完成）
      setTimeout(() => {
        setShowSecondSplash(false);
        setIsAppReady(true);
      }, 2000); // 示例为展示2秒，可自行调整
    };

    appInit();
  }, []);

  if (showSecondSplash) {
    return <SplashSecond />;
  }

  return isAppReady ? <MainStack /> : null;
};

export default App;

注意事项 #

• 两张闪屏的背景色、状态栏样式、核心视觉元素的位置要保持完全一致，避免切换时出现明显跳变
• 安卓端如果出现全面屏适配问题，可给第二张闪屏的图片样式添加对应刘海屏、挖孔屏的适配规则，和原生启动页适配逻辑对齐
• 如果需要更复杂的闪屏动画效果，也可以在第二张闪屏组件中直接添加动画逻辑，无需修改react-native-bootsplash的原生配置

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