React Native (a) react-native-video music player and achieve progress bar function
Features:
1. Card the song slide
2. Display the progress bar
Renderings:
Third-party components:
1.react-native-video
Github Address: https://github.com/react-native-community/react-native-video
2.react-native-animated-tabs
Github Address: https://github.com/philipshurpik/react-native-animated-tabs
Download:
Using npm:
npm install --save react-native-video
npm install --save react-native-animated-tabs
or using yarn:
yarn add react-native-video
yarn add react-native-animated-tabs
If the RN version> = 0.60, the automatic link, if you need to manually link 0.60
运行 `react-native link react-native-video` 连接react-native-video库
react-native-animated-tabs同上
Card sliding function
1. Import components required
import AnimatedTabs from "react-native-animated-tabs";
2. Components
<AnimatedTabs
panelWidth={getPanelWidth()}
activePanel={this.state.activePanel}
onAnimateFinish={activePanel => this.setState({ activePanel })}
>
/**
此处放你的卡片
<View><Image source={...}/></View>
...
*/
</AnimatedTabs>
3. Button switch card
<View style={styles.buttons}>
<TouchableOpacity
style={styles.text}
onPress={() => this.goToPanel(-1)}
>
<Text>上一首歌</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.text}
onPress={() => this.goToPanel(1)}
>
<Text>下一首歌</Text>
</TouchableOpacity>
4.goToPanel () function
goToPanel(direction) {
const nextPanel = this.state.activePanel + direction;
if (nextPanel >= 0 && nextPanel < panelsCount) {
this.setState({ activePanel: nextPanel });
}
}
}
This time it can realize the function of the slide card
sample graph:
Use react-native-video insertion Music
1. Import the required components and music
import Video from "react-native-video";
import url1 from "../static/video/徐小明-渔歌.mp3";
2. Components
<Video
source={require('./background.mp4')} // 视频的URL地址,或者本地地址
//source={require('./music.mp3')} // 可以播放音频
//source={{uri:'http://......'}}
ref='player'
rate={this.state.isPlay?1:0} // 控制暂停/播放,0 代表暂停paused, 1代表播放normal.
volume={1.0}
// 声音的放声音的放大倍数大倍数,0 为静音 ,1 为正常音量 ,更大的数字表示放大的倍数
muted={false} // true代表静音,默认为false.
paused={false} // true代表暂停,默认为false
resizeMode="contain" // 视频的自适应伸缩铺放行为,contain、stretch、cover
repeat={false} // 是否重复播放
playInBackground={false} // 当app转到后台运行的时候,播放是否暂停
playWhenInactive={false} // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
onLoadStart={this.loadStart} // 当视频开始加载时的回调函数
onLoad={this.setDuration} // 当视频加载完毕时的回调函数
onProgress={this.setTime} // 进度控制,每250ms调用一次,以获取视频播放的进度
onEnd={this.onEnd} // 当视频播放完毕后的回调函数
onError={this.videoError} // 当视频不能加载,或出错后的回调函数
style={styles.backgroundVideo}
/>
3. I set some of the properties of the component
<Video
ref={video => (this.player = video)}
source={SONGS[this.state.activePanel].url}
ref="video"
paused={this.state.paused}
onLoad={data => this.setDuration(data)}
volume={1.0}
paused={false}
onEnd={() => this.goToPanel(1)}
playInBackground={true}
onProgress={e => this.setTime(e)}
playWhenInactive={true}
/>
4. The use of function
constructor() {
super();
this.state = {
activePanel: 0, //当前active的面板
activeSong: SONGS[0], //正在播放的歌
currentTime: 0.0, //当前播放的时间
paused: 1.0, //播放
sliderValue: 0, //进度条的进度
duration: 0.0 //总时长
};
}
//格式化音乐播放的时间为0:00
formatMediaTime(duration) {
let min = Math.floor(duration / 60);
let second = duration - min * 60;
min = min >= 10 ? min : "0" + min;
second = second >= 10 ? second : "0" + second;
return min + ":" + second;
}
//设置进度条和播放时间的变化
setTime(data) {
let sliderValue = parseInt(this.state.currentTime);
this.setState({
slideValue: sliderValue,
currentTime: data.currentTime
});
}
//设置总时长
setDuration(duration) {
this.setState({ duration: duration.duration });
}
The progress bar configuration
<Slider
style={styles.slider}
value={this.state.slideValue}
maximumValue={this.state.duration}
step={1}
onValueChange={value => this.setState({ currentTime: value })}
/>