React Native 之组件react-native-sound的使用

1.在项目根目录下执行安装包下载

npm install react-native-sound --save 2. 然后自动使用链接:

react-native link react-native-sound 3.我自己是执行完以上两个步骤后查看了一下目录中相对的js配置文档,都是自动配置好的,但是以防意外,还是建议需要再核对一下

编辑android/settings.gradle以声明项目目录：

include ':react-native-sound' project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')

编辑android/app/build.gradle以声明项目依赖关系：

dependencies { ... compile project(':react-native-sound') }

编辑android/app/src/main/java/.../MainApplication.java注册本机模块：

... import com.zmxv.RNSound.RNSoundPackage ; // < - New ... public class MainApplication extends Application implements ReactApplication { ... @Override protected List < ReactPackage > getPackages（）{ return Arrays 。< ReactPackage > asList（ new MainReactPackage（）， new RNSoundPackage（）// < - New ）; }

注意:官方文档说明如果是旧版本的需要再更改一下

对于旧版本的React Native，您需要修改MainActivity.java：

... import com.zmxv.RNSound.RNSoundPackage ; // < - New ... public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { ... @Override protected void onCreate（Bundle savedInstanceState）{ ... mReactInstanceManager = ReactInstanceManager 。生成器（） .setApplication（getApplication（）） ... .addPackage（new MainReactPackage（）） .addPackage（new RNSoundPackage（））// < - New ... }

另官方的文档还有一项说明:

Android: Save your sound clip files under the directory android/app/src/main/res/raw. Note that files in this directory must be lowercase and underscored (e.g. my_file_name.mp3) and that subdirectories are not supported by Android. 但实际并不影响,自己新建的raw文件夹放进去的MP3.

执行效果如图:

index.android.js的文件原码

import React, {Component}  from  'react'; import {   StyleSheet,   Text,   TouchableOpacity,   View,   Platform,   AppRegistry }  from  'react-native'; const  Sound  =  require( 'react-native-sound'); const  Button  = ({title, onPress})  => (    <TouchableOpacity onPress ={onPress} >      < Text style ={styles.button} >{title} </ Text >    </TouchableOpacity > ); const  Header  = ({children})  => ( < Text style ={styles.header} >{children} </ Text >); const  Feature  = ({title, onPress, description, buttonLabel  =  "PLAY"})  => (    <View style ={styles.feature} >      <Header >{title} 123 </Header >      <Button title ={buttonLabel} onPress ={onPress} />    </View >); const  requireAudio  =  require( './advertising.mp3'); export default  class  App  extends  Component {    constructor( props) {     super(props);     Sound. setCategory( 'Ambient',  true);  // true = mixWithOthers     this. playSoundBundle  = ()  => {        const  s  =  new  Sound( 'advertising.mp3', Sound. MAIN_BUNDLE, ( e)  => {          if (e) {            console. log( 'error', e);         }  else {           s. setSpeed( 1);            console. log( 'duration', s. getDuration());           s. play(()  => s. release());  // Release when it's done so we're not using up resources         }       });     };     this. playSoundLooped  = ()  => {        if (this.state.loopingSound) {          return;       }        const  s  =  new  Sound( 'advertising.mp3', Sound. MAIN_BUNDLE, ( e)  => {          if (e) {            console. log( 'error', e);         }         s. setNumberOfLoops( - 1);         s. play();       });       this. setState({loopingSound : s});     };     this. stopSoundLooped  = ()  => {        if ( !this.state.loopingSound) {          return;       }       this.state.loopingSound         . stop()         . release();       this. setState({loopingSound :  null});     };     this. playSoundFromRequire  = ()  => {        const  s  =  new  Sound(requireAudio, ( e)  => {          if (e) {            console. log( 'error', e);            return;         }         s. play(()  => s. release());       });     };     this.state  = {       loopingSound :  undefined,     };   }    renderiOSOnlyFeatures() {      return [        <Feature key = "require" title = "Audio via 'require' statement" onPress ={this.playSoundFromRequire} />,     ]   }    render() {      return  <View style ={styles.container} >        <Feature title = "Main bundle audio" onPress ={this.playSoundBundle} buttonLabel ={ '重置'} />       {this.state.loopingSound          ?  <Feature title = "Main bundle audio (looped)" buttonLabel ={ '暂停'} onPress ={this.stopSoundLooped} />          :  <Feature title = "Main bundle audio (looped)" buttonLabel ={ '播放'} onPress ={this.playSoundLooped} />       }       { Platform. OS  ===  'ios'  ? this. renderiOSOnlyFeatures()  :  null }      </View >   } } const  styles  =  StyleSheet. create({   container : {     flex :  1,     flexDirection :  'column',     justifyContent :  'center',     alignItems :  'center',   },   button : {     fontSize :  20,     backgroundColor :  'silver',     padding :  5,   },   header : {     borderBottomWidth :  1,     borderBottomColor :  'black',   },   feature : {     padding :  20,     alignSelf :  'stretch',   } }); AppRegistry. registerComponent( 'App', ()  => App);

原项目git仓库地址:https://github.com/zmxv/react-native-sound