React Native (一) react-native-video实现音乐播放器和进度条的功能
功能：
1.卡片滑动切歌
2.显示进度条
效果图：
第三方组件：
1.react-native-video
Github地址：https://github.com/react-native-community/react-native-video
2.react-native-animated-tabs
Github地址：https://github.com/philipshurpik/react-native-animated-tabs
下载方式：
Using npm:
1npm install --save react-native-video 2npm install --save react-native-animated-tabs
or using yarn:
1yarn add react-native-video 2yarn add react-native-animated-tabs
如果RN版本>=0.60,是自动link的，如果在0.60以下则需要手动link
1运行 `react-native link react-native-video` 连接react-native-video库 2 3react-native-animated-tabs同上
卡片滑动功能
1.导入需要的组件
import AnimatedTabs from "react-native-animated-tabs";
2.使用组件
1 <AnimatedTabs 2 panelWidth={getPanelWidth()} 3 activePanel={this.state.activePanel} 4 onAnimateFinish={activePanel => this.setState({ activePanel })} 5 > 6 /** 7 此处放你的卡片 8 <View><Image source={...}/></View> 9 ... 10 */ 11 </AnimatedTabs>
3.按钮切换卡片
1 <View style={styles.buttons}> 2 <TouchableOpacity 3 style={styles.text} 4 onPress={() => this.goToPanel(-1)} 5 > 6 <Text>上一首歌</Text> 7 </TouchableOpacity> 8 9 <TouchableOpacity 10 style={styles.text} 11 onPress={() => this.goToPanel(1)} 12 > 13 <Text>下一首歌</Text> 14 </TouchableOpacity>
4.goToPanel()函数
1goToPanel(direction) { 2 const nextPanel = this.state.activePanel + direction; 3 4 if (nextPanel >= 0 && nextPanel < panelsCount) { 5 this.setState({ activePanel: nextPanel }); 6 } 7 } 8}
这时候就可以实现滑动卡片功能了
示例图：
使用react-native-video音乐插入
1.导入需要的组件和音乐
1import Video from "react-native-video"; 2import url1 from "../static/video/徐小明-渔歌.mp3";
2.使用组件
1<Video 2 source={require('./background.mp4')} // 视频的URL地址，或者本地地址 3 //source={require('./music.mp3')} // 可以播放音频 4 //source={{uri:'http://......'}} 5 ref='player' 6 rate={this.state.isPlay?1:0} // 控制暂停/播放，0 代表暂停paused, 1代表播放normal. 7 volume={1.0} 8 // 声音的放声音的放大倍数大倍数，0 为静音 ，1 为正常音量 ，更大的数字表示放大的倍数 9 muted={false} // true代表静音，默认为false. 10 paused={false} // true代表暂停，默认为false 11 resizeMode="contain" // 视频的自适应伸缩铺放行为，contain、stretch、cover 12 repeat={false} // 是否重复播放 13 playInBackground={false} // 当app转到后台运行的时候，播放是否暂停 14 playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS 15 onLoadStart={this.loadStart} // 当视频开始加载时的回调函数 16 onLoad={this.setDuration} // 当视频加载完毕时的回调函数 17 onProgress={this.setTime} // 进度控制，每250ms调用一次，以获取视频播放的进度 18 onEnd={this.onEnd} // 当视频播放完毕后的回调函数 19 onError={this.videoError} // 当视频不能加载，或出错后的回调函数 20 style={styles.backgroundVideo} 21 />
3.我设置组件的一些属性
1 <Video 2 ref={video => (this.player = video)} 3 source={SONGS[this.state.activePanel].url} 4 ref="video" 5 paused={this.state.paused} 6 onLoad={data => this.setDuration(data)} 7 volume={1.0} 8 paused={false} 9 onEnd={() => this.goToPanel(1)} 10 playInBackground={true} 11 onProgress={e => this.setTime(e)} 12 playWhenInactive={true} 13 />
4.用到的函数
1 constructor() { 2 super(); 3 4 this.state = { 5 activePanel: 0, //当前active的面板 6 activeSong: SONGS[0], //正在播放的歌 7 currentTime: 0.0, //当前播放的时间 8 paused: 1.0, //播放 9 sliderValue: 0, //进度条的进度 10 duration: 0.0 //总时长 11 }; 12 } 13 //格式化音乐播放的时间为0：00 14 formatMediaTime(duration) { 15 let min = Math.floor(duration / 60); 16 let second = duration - min * 60; 17 min = min >= 10 ? min : "0" + min; 18 second = second >= 10 ? second : "0" + second; 19 return min + ":" + second; 20 } 21 22 //设置进度条和播放时间的变化 23 setTime(data) { 24 let sliderValue = parseInt(this.state.currentTime); 25 this.setState({ 26 slideValue: sliderValue, 27 currentTime: data.currentTime 28 }); 29 } 30 31 //设置总时长 32 setDuration(duration) { 33 this.setState({ duration: duration.duration }); 34 }
进度条的配置
1 <Slider 2 style={styles.slider} 3 value={this.state.slideValue} 4 maximumValue={this.state.duration} 5 step={1} 6 onValueChange={value => this.setState({ currentTime: value })} 7 />