网站链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/learn-react-native-video/

React Native项目中插入视频播放的简单教程(iOS)。

在你的项目中执行以下步骤:

1.运行npm install react-native-video --save

2.iOS下:

(1)在Xcode中打开你的项目,在名字为Libraries上点右键,然后点击Add Files to "Your Project Name";

 

(2)添加libRTCVideo.a到 Build Phases -> Link Binary With Libraries 

(3)添加 项目中的.mp4 格式的视频文件到 Build Phases -> Copy Bundle Resources

(4)在你的项目中使用以下命令就可以得到你想引用的视频:

调用视频用法:

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.
<Video source={{uri: "background"}} // Can be a URL or a local file.
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="contain" // Fill the whole screen at aspect ratio.
repeat={true} // Repeat forever.
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
style={styles.backgroundVideo} /> // Later on in your styles..
var styles = Stylesheet.create({
backgroundVideo: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});

React Native视频播放(iOS)的更多相关文章

  1. React Native & Android & iOS & APK

    React Native & Android & iOS & APK https://play.google.com/apps/publish/signup/ $ 25 bui ...

  2. React Native & Android & iOS

    React Native & Android & iOS React Native & Android & iOS https://facebook.github.io ...

  3. [React Native] Basic iOS Routing -- NavigatorIOS

    Inside the app component, we use NavigatiorIOS to render the compoent: class githubnotetaker extends ...

  4. React Native (二) ios打包到真机

    每当在模拟器上完成了开发,都想到真机上试试,正好前段时候淘了一个imac. 这里就以打包rndemo到iphone为例,讲一下react ntive ios打包到真机的流程. 一.前置 1.有个iph ...

  5. React Native(十三)——ios键盘挡住textInput

    渐入佳境 用React Native重构的项目也快接近尾声,剩下的就是适配ios的功能了.慢慢地也从中琢磨出了一点门道,于是就遇见了键盘遮挡textInput问题斑斑: 正常页面: android点击 ...

  6. React Native之iOS App打包

    iOS打包步骤(一.二.三可不按照顺序) 步骤一: 选择iOS Device(以下两者选其中一个即可) 选择 Generic iOS Device (个人建议使用这个) 选择Generic iOS D ...

  7. React Native ios开发第一课

    前言 本篇文章的作用在于帮助你快速上手使用React Native编写iOS应用.如果你现在还不太了解React Native是什么以及Facebook为什么要创建React Native,你可以先看 ...

  8. 《React Native 精解与实战》书籍连载「iOS 平台与 React Native 混合开发」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  9. 《React Native 精解与实战》书籍连载「配置 iOS 与 Android 开发环境」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

随机推荐

  1. sqlservice 查询该字段的值是否为数字、不包含a-z字母、获取中文的首字母

    select zjm from xskh where guid_yw='e6ee44f3-98ab-4446-bd9b-db2e525d3b24' and zjm not like  '%[ABCDE ...

  2. eclipse下创建maven工程

    http://blog.chinaunix.net/uid-26959955-id-3248053.html

  3. 将序列设置为字段的默认值 - oracle

    1.表结构中log_id 非空.且为主键字段 create table TL_M_QRTZ_LOG( log_id NUMBER(8) not null, job_id NUMBER(8) not n ...

  4. VC++ 中滑动条(slider控件)使用 [转+补充]

    滑动控件slider是Windows中最常用的控件之一.一般而言它是由一个滑动条,一个滑块和可选的刻度组成,用户可以通过移动滑块在相应的控件中显示对应的值.通常,在滑动控件附近一定有标签控件或编辑框控 ...

  5. 从客户端(&)中检测到有潜在危险的 Request.Path 值解决方案

    出这个问题基本上是在转址字符串中有非法字符“<”,'&'之类的. 方案1: 如果仅仅只是转换页面,传参时出现的问题,可对数据加密: 绑定数据传值时加密 <%#Server.UrlE ...

  6. 模拟log4j获取日志对象调用所在的类名、方法名及行号

    当我们在记录日志时,每个类中会定义一个日志对象,然后利用这个对象去写日志,那么我们在处理日志时,如何能才能记录日志对象所在的类.方法和行号呢?log4j中已经实现了该功能,那么它是怎么实现的呢? 其实 ...

  7. TP的一条sql语句(子查询)

    $model=M(''); $model->table(C('DB_PREFIX').'goods as g') ->join(C('DB_PREFIX').'orders as o on ...

  8. FreeMarker中文API手冊(完整)

    FreeMarker概述 FreeMarker是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯Java编写 FreeMarker被设计用来生成HTML Web页面,特别是基于MVC模式的应用 ...

  9. poj 3249 Test for Job (DAG最长路 记忆化搜索解决)

    Test for Job Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 8990   Accepted: 2004 Desc ...

  10. 深入解析 ext2 文件系统

     很久以来,就想写一篇关于ext 家族文件系统的文章,源于我刚工作的时候,曾经一不小心rm -rf,误删除了很多文件,当时真想有个数据恢复软件能帮我把数据回复了.当然学习数据恢复,首先要学习文件系统. ...