转载请注明原文地址: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使用(安卓版)的更多相关文章

  1. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  2. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. React Native的组件ListView

    React Native的组件ListView类似于iOS中的UITableView和UICollectionView,也就是说React Native的组件ListView既可以实现UITableV ...

  4. React Native交互组件之Touchable

    React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...

  5. React Native中组件的props和state

    一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...

  6. React Native常用组件在Android和IOS上的不同

    React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...

  7. 封装 React Native 原生组件(iOS / Android)

    封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...

  8. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  9. React-Native(三):React Native是基于React设计的

    React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...

  10. 用 React 编写移动应用 React Native

    转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...

随机推荐

  1. 完全定制UITabBarViewController

    完全定制UITabBarViewController 效果   源码 https://github.com/YouXianMing/iOS-Project-Examples 中的 TotalCusto ...

  2. springMVC中HTTP PUT请求该如何传输请求参数呢?

    对于表单提交,tomcat默认只解析POST的表单,对于PUT和DELETE的不处理,所以Spring拿不到.解决方案:1.修改tomcat的server.xml:   <Connector p ...

  3. django 如何重写 HttpResponseRedirect 的响应状态码 302?

    fetch无法获取302响应的header信息: 浏览器对于302状态重定向,是直接进行重定向. 且js的fetch请求无法获取(catch也好.then也罢)到302响应的header信息,自然也无 ...

  4. const 变量修饰 研究

    #include<stdio.h> #include<iostream> using namespace std; struct A { ;} ;} }; int main() ...

  5. go语言之进阶篇error接口应用

    1.error接口应用 示例: package main import "fmt" import "errors" func MyDiv(a, b int) ( ...

  6. 2、Python特征

    Python特征 Python编程语言中的定位 脚本语言 高阶动态编程语言 简单易学 Python是一种代表简单主义思想的语言.Python的这种伪代码本质是它最大的优点之一.它使你能够专注于解决问题 ...

  7. 魅族推送 简介 集成 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. sharding-jdbc之——分库分表实例

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/79368021 一.概述 之前,我们介绍了利用Mycat进行分库分表操作,Mycat ...

  9. ofstream的使用方法--超级精细。C++文件写入、读出函数(转)

    ofstream的使用方法ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间;  在C++中,有一个stream这个类,所有的I/O都以这个“流”类为基础的, ...

  10. [Math]理解卡尔曼滤波器 (Understanding Kalman Filter) zz

    1. 卡尔曼滤波器介绍 卡尔曼滤波器的介绍, 见 Wiki 这篇文章主要是翻译了 Understanding the Basis of the Kalman Filter Via a Simple a ...