如何在React Native中使用react-native-bootsplash为splash screen添加音效

前置依赖说明 #

你已经完成了react-native-bootsplash的启动屏配置，以下提供两种实现思路，可根据需求选择：

方案一：JS 层实现（开发成本低，推荐大多数场景使用） #

1. 安装音频播放库 #

使用适配性最广的react-native-sound库，执行安装命令：

# npm
npm install react-native-sound
# yarn
yarn add react-native-sound
# iOS 需执行pod安装
cd ios && pod install && cd ..

2. 配置音频资源 #

• 安卓：将音频文件（推荐mp3/wav格式，体积控制在100KB以内避免拖慢启动）放入android/app/src/main/res/raw目录，没有raw文件夹请自行新建，文件名仅支持小写字母、数字、下划线，不能有特殊字符/大写字母
• iOS：用Xcode打开iOS项目，将音频文件拖入主项目目录，勾选「Copy items if needed」和对应项目的target选项

3. 逻辑实现 #

在你的App入口文件（如App.js/App.tsx）中，和react-native-bootsplash的隐藏逻辑配合调用：

import React, { useEffect } from 'react';
import BootSplash from 'react-native-bootsplash';
import Sound from 'react-native-sound';

// 初始化音频，填写你自己的音频文件名
const splashSound = new Sound('splash_audio.mp3', Sound.MAIN_BUNDLE, (error) => {
  if (error) {
    console.log('启动音效加载失败', error);
  }
});

const App = () => {
  useEffect(() => {
    const init = async () => {
      // 启动后立刻播放音效
      splashSound.play((success) => {
        if (!success) {
          console.log('启动音效播放失败');
        }
        // 播放完成后释放资源
        splashSound.release();
      });
      
      // 可以根据音效时长调整启动屏最小显示时间，保证音效播完再隐藏启动屏
      await new Promise(resolve => setTimeout(resolve, 2000));
      await BootSplash.hide({ fade: true });
    };

    init();
  }, []);

  // 你的App其他逻辑
  return <>{/* 根导航/根组件 */}</>;
};

export default App;

方案二：原生层实现（音效触发更早，和启动屏完全同步） #

如果希望音效在APP启动的第一时间就播放，不需要等JS bundle加载完成，可以直接在原生侧实现：

安卓端实现 #

在MainActivity.java的onCreate方法中添加音频播放逻辑：

import android.media.MediaPlayer;
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {
  private MediaPlayer splashSound;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    RNBootSplash.init(this); // 保持你原有的BootSplash初始化代码
    super.onCreate(savedInstanceState);

    // 初始化并播放启动音效，R.raw.splash_audio对应你raw目录下的音频文件名
    splashSound = MediaPlayer.create(this, R.raw.splash_audio);
    splashSound.start();
    // 音频播放完成后释放资源
    splashSound.setOnCompletionListener(mp -> mp.release());
  }
}

iOS端实现 #

在AppDelegate.mm的didFinishLaunchingWithOptions方法中添加逻辑：

#import <AVFoundation/AVFoundation.h>
#import "RNBootSplash.h" // 保持原有BootSplash导入

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // 保持你原有的其他初始化代码
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView]; // 保持原有BootSplash初始化

  // 播放启动音效
  NSString *soundPath = [[NSBundle mainBundle] pathForResource:@"splash_audio" ofType:@"mp3"];
  AVAudioPlayer *splashSound = [[AVAudioPlayer alloc] initWithContentsOfURL:[NSURL fileURLWithPath:soundPath] error:nil];
  [splashSound play];
  
  return YES;
}

注意事项 #

• 音频文件尽量压缩到最小体积，避免增加APP包体积和启动耗时
• 如果不需要音效播放完成再隐藏启动屏，可以删除对应延时逻辑，音效会在后台自行播放
• 测试时建议用真机调试，部分模拟器可能出现音频播放异常的情况

内容的提问来源于stack exchange，提问作者Jefferson Alejandro Alava