开发一个基于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',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.如果发现在模拟器可以看视频，到了真机读取不出来，我也不知道是什么原因

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

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

猜你在找的React相关文章