一、视频组件
这里用：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',flex:6,alignItems:'center'}} > {/* 作者信息 */} <View style={{flexDirection:'column',justifyContent:'flex-start'}} > <Text style={{flex:1,color:'#fff',fontSize: 12,color:'#1C86EE',textAlign:'left'}}>刘邦</Text> <Text style={{flex:1,fontSize: 10,textAlign:'left'}}>Duang</Text> </View> {/* 发布时间/观看信息 */} <View style={{flexDirection:'column',justifyContent:'flex-end'}} > {/* 发布时间 */} <Text style={{flex:1,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,textAlign:'left'}}>4563</Text> </View> </View> </View> </View> {/* 第二部分:视频 就一个View*/} <View style={{flexDirection:'row',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',alignItems:'center',borderBottomWidth:1,borderBottomColor:'#87CEFA'}} > <View style={styles.icon} borderRightWidth={1} borderRightColor={'#87CEFA'}> <View style={{flexDirection:'row',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',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',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',alignItems:'center'}} > <View style={{flexDirection:'column',alignItems:'center'}}> <View style={{flexDirection:'row',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',paddingLeft:10,paddingBottom:10}} > <Text style={{fontSize: 11,fontSize: 11}}>:刘邦</Text> </View> </View> </View> </View> ); } }
三、注意事项
1.如果出现视频读取不出来的问题，看看有没有遗漏了设置
2.如果配置都对，重新在android studio中编译一下项目
3.如果以上两个方法试了还是不行，换个小点的视频，可能是格式和大小
4.如果发现在模拟器可以看视频，到了真机读取不出来，我也不知道是什么原因
