一、视频组件
这里用:react-native-video,详见官网:https://github.com/react-native-community/react-native-video
添加组件
yarn add --save react-native-video
react-native link
我很幸运,两个命令都成功了,如果link不成功,跟着这篇文章:https://www.npmjs.com/package/react-native-video
- 编码
import Video from 'react-native-video';
...
<Video ref="myvideo"
source={
{
uri:"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"}}
style={
{
width:width,height:180, top: 0, left: 0, bottom: 0, right: 0,}}
rate={
1.0} // 0 is paused, 1 is normal.
volume={
1.0} // 0 is muted, 1 is normal.
muted={
false} // Mutes the audio entirely.
paused={
false} // Pauses playback entirely.
resizeMode="cover" // Fill the whole screen at aspect ratio.*
repeat={
true} // Repeat forever.
playInBackground={
false} // Audio continues to play when app entering background.
playWhenInactive={
false} // [iOS] Video continues to play when control or notification center are shown.
ignoreSilentSwitch={
"ignore"} // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
progressUpdateInterval={
250.0} // [iOS] Interval to fire onProgress (default to ~250ms)
onLoadStart={
this.loadStart} // Callback when video starts to load
onLoad={
this.setDuration} // Callback when video loads
onProgress={
this.setTime} // Callback every ~250ms with currentTime
onEnd={
this.onEnd} // Callback when playback finishes
onError={
this.videoError} // Callback when video cannot be loaded
onBuffer={
this.onBuffer} // Callback when remote video is buffering
onTimedMetadata={
this.onTimedMetadata} // Callback when the stream receive some metadata
官网都讲解的挺详细的,具体还是看官网吧!
二、样式布局
react-native的布局常用的有4个:flexDirection、justifyContent、flex、alignItems,其中flex最简单,就是代表所占的比例,比如有两个,上下排列,其中一个flex:1,另一个flex:2, 则两者在一个屏幕里面的比例是1:2,第一个占了1/(1+2)个屏幕,第二个占了2/(1+2),如果两者都是flex:1,则它们所占的面积相等。其它3个布局有点复杂,看下图的说明:
这里还有一点,我是直接把View理解为div的,所以我们的首页布局,可以设计成如下:
首页是由轮播图在顶部,大约占1/4,下面是循环的用户内容,每个内容看成一个整体,我把它定为一个类叫做:,这个的布局分为4部分,第一部分是最上面用户信息部分,第二是视频部分,第三是点赞、评论、分享,第4部分是前3条评论,每个部分都有黑色的底部边界。
类如下,忽略视频部分,可以用图片代替:
class COLL extends Component{
constructor(props){
super(props);
this.state = { detailTitle:'aaaa'};
}
render(){
return(
/*总体的布局,沿着竖轴排列*/
<View style={
{
flexDirection:'