用React Native做一个填字游戏（3）——背景音乐

游戏都需要有点背景音乐，在RN里播放音乐，可以使用第三方插件react-native-sound，使用的方法也简单。

npm install react-native-sound --savereact-native link react-native-sound

将音乐文件加入到项目中，Android的要将文件放入android/app/src/main/res/raw/内；iOS的用Xcode打开项目的ios文件夹，在根目录下点右键->Add Files to ["xxx"]，选择要加入的文件。
加好音乐文件后就能在代码里使用插件来播放音乐了，代码片段如下，完整代码见Board.js

import Sound from 'react-native-sound';const music = new Sound('background.mp3', Sound.MAIN_BUNDLE, (error) => {  // 加载成功回调  if (error) {    console.log('failed to load the sound', error);    return;  }  music.setVolume(0.8); // 设置音量  music.setNumberOfLoops(-1); // 无限循环  music.play((success) => { // 播放完成后回调    if (success) {      console.log('successfully finished playing');    } else {      console.log('playback failed due to audio decoding errors.' + success);    }  });  this.setState({ backgroundMusic: music, loadingMusic: false });}

另外不要忘记在程序退出时释放资源

  componentWillUnmount() {    const { backgroundMusic } = this.state;    backgroundMusic.stop();    backgroundMusic.release();  }

这里还有一个问题，这背景音乐即使在用户已经切换到其它程序或按Home键后仍然在播放，这显然是不对的。在下一篇在讲如何监听App的状态。

更多相关文章

随机推荐