开发一个基于React Native的简易demo--视频组件+布局
来源:互联网 发布:公众号文章网源码 编辑:程序博客网 时间:2024/05/16 06:42
一、视频组件
这里用:react-native-video,详见官网:https://github.com/react-native-community/react-native-video
添加组件
yarn add --save react-native-videoreact-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–读取网络数据并展示
- 开发一个基于React Native的简易demo--视频组件+布局
- 开发一个基于React Native的简易demo--前记
- 开发一个基于React Native的简易demo--源码
- 开发一个基于React Native的简易demo--导航栏+轮播图
- 开发一个基于React Native的简易demo--读取网络数据并展示
- react-native 组件demo
- react-native播放视频组件 react-native-video的用法
- React Native开发的仿美团小demo
- 一个非常简单的react native计时器demo
- 【视频】基于React Native的跨三端技术实践
- React Native组件布局应用示例小结
- 这是一个实现下拉刷新的react native组件 react-native-pullview
- 如何创建一个android的react-native组件(二)
- react-native的flex布局
- react-native组件的生命周期
- React Native 组件的生命周期
- React Native-组件的引用
- React Native组件的生命周期
- 第十四周项目三
- bootstrap-table 实现表格增删改查
- 第十五周内部排序(1)项目3 --- B-树的基本操作
- 第十五周项目一(3)——验证算法之直接选择排序
- 第十五周项目1-验证算法-直接选择排序
- 开发一个基于React Native的简易demo--视频组件+布局
- Flume架构及案例介绍(转载)
- NoSQL之MongDB数据类型
- 第四周 【项目3
- 微信公众号定位用户所在位置
- Java笔记杨枝12.3
- Centos下安装Nginx
- 软件工程文档总结
- 学了一个学期的JAVA菜鸟的java回顾