网站链接: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. java设计模式(装饰模式)

    装饰模式实现了可以动态地为原对象扩展方法 装饰对象与被装饰的都实现了同一个接口(或抽象类) 举个例子: 工作 可以边吃东西边工作,也可以边喝东西边工作,还可以工作的时候边吃边喝 创建共同接口 Work ...

  2. 设置ul阴影效果和边框圆角

    ul.box {position: relative;z-index: 1; /* prevent shadows falling behind containers with backgrounds ...

  3. 第二章TP-Link 703N OpenWrt刷回原厂固件

    (TP官网)首先原厂固件下载 用终端,使用cat /proc/mtd查看路由支持的升级命令,我的是root@OpenWrt:~# cat /proc/mtd dev:    size   erases ...

  4. Segger RTT : Real Time Terminal SRAM 调试解决方法

    http://segger.com/jlink-real-time-terminal.html Real Time Terminal SEGGER's Real Time Terminal (RTT) ...

  5. C#中使用SQLite数据库简介(上)

    [SQLite数据库] SQLite是一个开源的轻量级的桌面型数据库,它将几乎所有数据库要素(包括定义.表.索引和数据本身)都保存在一个单一的文件中.SQLite用C编写实现,它在内存消耗.文件体积. ...

  6. C#生成软件注册码

    开发软件时,当用到商业用途时,注册码与激活码就显得很重要了.现在的软件破解技术实在在强了,各种国内外大型软件都有注册机制,但同时也不断地被破解.下面发的只是一个常用版本,发出源码被破就更容易了,但我们 ...

  7. 使用cwRsync实现windows下文件定时同步【转】

    1.参考文献: 使用cwRsync实现windows下文件定时同步(备份) 文件同步工具CwRsync的使用方法及常用命令详解 2.背景: 当前的SCADA架构中,有1台Server,5台FE,还有1 ...

  8. cocos2d-x jsbinding 资源下载实现

    cocos2dx没有直接给出资源下载的api,可能是因为资源的管理每个项目的需求不太一样,所以完整的资源下载功能需要我们自己去实现. 资源下载分为两部分,一部分是资源请求,另一部分是资源文件写入.资源 ...

  9. BigDecimal带精度的运算的两篇文章

    转自:http://guoliangqi.iteye.com/blog/670908 之前提到过在商业运算中要使用BigDecimal来进行相关的钱的运算(java中关于浮点运算需要注意的 ),可是实 ...

  10. Photoshop-制作图片圆角2种方法[转]

    方案一:       使用选区和蒙版相结合,用图章制作圆角选区,删除多余部分 效果: 实现步骤: 一.如果是直接在已有的图片上面编辑则看下图,否则跳过此不 二.用矩形工具选择需要保留的图片内容 三.选 ...