React-Native视频组件react-native-video使用(安卓版)
转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7366019.html
一:安装
在IDE中打开你的项目,然后在IDE的terminal,输入:
npm i -S react-native-video
安装第三方的视频组件。
然后,执行以下命令,把下载回来的第三方库连接到本地库中:
react-native link
二:使用
在RN的js文件中,引入视频播放组件:
import Video from 'react-native-video';
然后,在就可以使用这个组件来播放视频了。
播放本地视频:
<Video
source={require('./video/xx.mp4')}
style={styles.播放器样式}
rate={this.state.rate} // 控制暂停/播放,0 代表暂停paused, 1代表播放normal.
paused={false}
volume={1} // 声音的放大倍数,0 代表没有声音,就是静音muted, 1 代表正常音量 normal,更大的数字表示放大的倍数
muted={true} // true代表静音,默认为false.
resizeMode='contain' // 视频的自适应伸缩铺放行为,
onLoad={this.onLoad} // 当视频加载完毕时的回调函数
onLoadStart={this.loadStart} // 当视频开始加载时的回调函数
onProgress={this.onProgress} // 进度控制,每250ms调用一次,以获取视频播放的进度
onEnd={this.onEnd} // 当视频播放完毕后的回调函数
onError={this.videoError} // 当视频不能加载,或出错后的回调函数 repeat={false} // 是否重复播放
/>
播放网络视频:
<Video
source={{uri:'视频url'}}
style={styles.播放器样式}
rate={this.state.rate} // 控制暂停/播放,0 代表暂停paused, 1代表播放normal.
paused={false}
volume={1} // 声音的放大倍数,0 代表没有声音,就是静音muted, 1 代表正常音量 normal,更大的数字表示放大的倍数
muted={true} // true代表静音,默认为false.
resizeMode='contain' // 视频的自适应伸缩铺放行为,
onLoad={this.onLoad} // 当视频加载完毕时的回调函数
onLoadStart={this.loadStart} // 当视频开始加载时的回调函数
onProgress={this.onProgress} // 进度控制,每250ms调用一次,以获取视频播放的进度
onEnd={this.onEnd} // 当视频播放完毕后的回调函数
onError={this.videoError} // 当视频不能加载,或出错后的回调函数 repeat={false} // 是否重复播放
/>
React-Native视频组件react-native-video使用(安卓版)的更多相关文章
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native的组件ListView
React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...
- React Native交互组件之Touchable
React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...
- React Native中组件的props和state
一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...
- React Native常用组件在Android和IOS上的不同
React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...
- 封装 React Native 原生组件(iOS / Android)
封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...
- React Native 系列(二) -- React入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- React-Native(三):React Native是基于React设计的
React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...
- 用 React 编写移动应用 React Native
转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...
随机推荐
- 美国恐怖故事第七季/全集American Horror Story全迅雷下载
FX电视台已经续订了<美国恐怖故事>第七季,将于2017年开播,第七季终于确定副标题为<邪教 Cult>.剧集的创造者瑞恩·墨菲与布拉德·法尔查克将再度联手.顺便一说,< ...
- 详细解读Volley(五)—— 通过源码来分析业务流程
一.初始化请求队列并运行 我们用Volley时,最先开始的就是初始化请求队列,一种常见的写法如下: public class MyApplication extends Application { p ...
- html效果增强
1:提示框 http://keleyi.com/keleyi/phtml/jqplug/ 2:loading效果 <script>function showPage(){ $('#d ...
- 《成神之路-基础篇》JVM——Java内存模型(已完结)
Java内存模型 本文是<成神之路系列文章>的第一篇,主要是关于JVM的一些介绍. 持续更新中 Java内存模型 JVM内存结构 VS Java内存模型 VS Java对象模型(Holli ...
- [转]Apache 配置虚拟主机三种方式
转自: http://www.cnblogs.com/hi-bazinga/archive/2012/04/23/2466605.html 一.基于IP 1. 假设服务器有个IP地址为192.168. ...
- django的权限认证:登录和退出。auth模块和@login_required装饰器
在settings.py中配置LOGIN_URL参数: # 用户访问带有(@login_required)标签的页面(view)时,如果没有登录,就会跳转到LOGIN_URL(即登陆url). LOG ...
- python读取配置文件的方式
python读取配置文件的方式 1.从config.ini中读取,后缀无所谓,文件名字也无所谓,不过config.ini是常用写法,所谓见名知意 config.ini内容: [global] ip = ...
- 修改visual studio2010 的快捷键,使用ctrl+W 关闭当前文档
废话不多说,打开visualstudio 的菜单 [工具]->[选项].定位到 环境->键盘. 找到光口.关闭文档窗口.把默认的ctrl+F4移除,因为这两个组合键按起来太麻烦,太累了.再 ...
- WebFormViewEngine及用户控件寻址bug
在做我的网站的时候遇到了主题切换的问题,特总结与大家共享. 熟悉asp.net mvc的朋友都知道,mvc中,默认情况下视图都在views文件夹下放着.要想改变文件必须重写WebFormViewEng ...
- go语言之进阶篇关闭channel
1.关闭channel package main import ( "fmt" ) func main() { ch := make(chan int) //创建一个无缓存chan ...