开发一个基于React Native的简易demo--视频组件+布局

一、视频组件

这里用：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:'column', backgroundColor:'#363636',borderBottomWidth:3,borderBottomColor:'#121212'}}>

{/* 第一部分:信息部分，里面分为3个列，沿着水平轴排列 */}
<View style={{flexDirection:'row',padding:10, justifyContent:'center',flex:1,alignItems:'center'}} >
{/*头像*/}
<View style={{flexDirection: 'row',flex:1}} >
<Image source={require('./img/profile.jpg')} style={styles.imgProfile}></Image>
</View>
{/*作者信息和发布时间/观看信息*/}
<View style={{flexDirection:'row',justifyContent:'center',flex:6,alignItems:'center'}} >
{/* 作者信息 */}
<View style={{flexDirection:'column',flex:1,justifyContent:'flex-start'}} >
<Text style={{flex:1,color:'#fff',fontSize: 12,color:'#1C86EE',textAlign:'left'}}>刘邦</Text>
<Text style={{flex:1,color:'#fff',fontSize: 10,textAlign:'left'}}>Duang</Text>
</View>
{/* 发布时间/观看信息 */}
<View style={{flexDirection:'column',flex:1,justifyContent:'flex-end'}} >
{/* 发布时间 */}
<Text style={{flex:1,color:'#fff',fontSize: 12,textAlign:'right'}}>4天前</Text>
{/* 观看 */}
<View style={{flexDirection:'row',justifyContent:'flex-end',flex:1}} >
<Text style={{flex:4}}></Text>
<Image source={require('./img/view.png')} style={{width:16,height:16}}></Image>
<Text style={{flex:1,color:'#fff',fontSize: 10,textAlign:'left'}}>4563</Text>
</View>
</View>
</View>
</View>

{/* 第二部分:视频 就一个View*/}
<View style={{flexDirection:'row',justifyContent:'center',flex:1,alignItems:'center'}} >
{/* <Image source={require('./img/profile.jpg')} style={{width:width,height:150}}></Image> */}
<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
/>
</View>

{/* 第三部分: 点赞评论分享 */}
<View style={{flexDirection:'row',justifyContent:'center',flex:1,alignItems:'center',borderBottomWidth:1,borderBottomColor:'#87CEFA'}} >
<View style={styles.icon} borderRightWidth={1} borderRightColor={'#87CEFA'}>
<View style={{flexDirection:'row',justifyContent:'flex-end',flex:1,alignItems:'center'}} >
<Image source={require('./img/zan.jpg')} style={styles.imgIcon}></Image>
</View>
<Text style={styles.iconIcon}>41</Text>
</View>
<View style={styles.icon} borderRightWidth={1} borderRightColor={'#87CEFA'}>
<View style={{flexDirection:'row',justifyContent:'flex-end',flex:1,alignItems:'center'}} >
<Image source={require('./img/comment.jpg')} style={styles.imgIcon}></Image>
</View>
<Text style={styles.iconIcon}>26</Text>
</View>
<View style={styles.icon} >
<View style={{flexDirection:'row',justifyContent:'flex-end',flex:1,alignItems:'center'}} >
<Image source={require('./img/share.jpg')} style={styles.imgIcon}></Image>
</View>
<Text style={styles.iconIcon}>分享</Text>
</View>
</View>

{/* 第四部分: 评论内容 */}
<View style={{flexDirection:'row',justifyContent:'flex-start',flex:1,alignItems:'center'}} >
<View style={{flexDirection:'column',justifyContent:'flex-start',alignItems:'center'}}>
<View style={{flexDirection:'row',justifyContent:'flex-start',flex:1,alignItems:'center',paddingTop:10,paddingLeft:10}} >
<Text style={{fontSize: 11,color:'#1C86EE'}}>刘邦2</Text>
<Text style={{color:'#fff',fontSize: 11}}>回复</Text>
<Text style={{fontSize: 11,color:'#1C86EE'}}>刘邦</Text>
<Text style={{color:'#fff',fontSize: 11}}>:刘邦</Text>
</View>
<View style={{flexDirection:'row',justifyContent:'flex-start',flex:1,alignItems:'center',paddingLeft:10}} >
<Text style={{fontSize: 11,color:'#1C86EE'}}>刘邦</Text>
<Text style={{color:'#fff',fontSize: 11}}>回复</Text>
<Text style={{fontSize: 11,color:'#1C86EE'}}>刘邦</Text>
<Text style={{color:'#fff',fontSize: 11}}>:刘邦</Text>
</View>
<View style={{flexDirection:'row',justifyContent:'flex-start',flex:1,alignItems:'center',paddingLeft:10,paddingBottom:10}} >
<Text style={{fontSize: 11,color:'#1C86EE'}}>刘邦</Text>
<Text style={{color:'#fff',fontSize: 11}}>回复</Text>
<Text style={{fontSize: 11,color:'#1C86EE'}}>刘邦</Text>
<Text style={{color:'#fff',fontSize: 11}}>:刘邦</Text>
</View>
</View>
</View>

</View>
);
}
}

三、注意事项

1.如果出现视频读取不出来的问题，看看有没有遗漏了设置

2.如果配置都对，重新在android studio中编译一下项目

3.如果以上两个方法试了还是不行，换个小点的视频，可能是格式和大小

4.如果发现在模拟器可以看视频，到了真机读取不出来，我也不知道是什么原因

下一篇：开发一个基于React Native的简易demo–读取网络数据并展示