第一步:
npm i -S react-native-af-video-player(安装前:先安装: react-native-video、react-native-keep-awake、react-native-vector-icons、react-native-orientation、react-native-linear-gradient
第二步:

react-native link react-native-video
react-native link react-native-keep-awake
react-native link react-native-vector-icons
react-native link react-native-orientation
react-native link react-native-linear-gradient 具体实现:
import React from 'react'
import { AppRegistry, StyleSheet, View } from 'react-native'
import Video from 'react-native-af-video-player'
const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: "center"
},
videocontent: {
  width: 1000,
  height: 660
},
})
const url = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
 
export default class VideoExample extends React.Component {
render() {
  return (
  <View style={styles.container}>
    <Video
    autoPlay={true}
    loop={true}
    style={styles.videocontent}
    fullScreenOnly={false}
    inlineOnly={true}
    url={url} />
  </View>
  )
  }
}
 
实现效果图:
 
 
其他设置参考:https://github.com/abbasfreestyle/react-native-af-video-player

react-native 视频播放器(很不错哦)的更多相关文章

  1. React Native桥接器初探

    本文假设你已经有一定的React Native基础,并且想要了解React Native的JS和原生代码之间是如何交互的. React Native的工作线程 shadow queue:布局在这个线程 ...

  2. React Native视频播放(iOS)

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

  3. PotPlayer 1.6.52965 美化版|视频播放器

    Potplayer播放器,基本上可以解析大部分的视频格式.作为单机版的视频播放器很不错的选择! Potplayer,只为播放而生! exp: 点击下载

  4. 【Egret】Native版本 视频播放器(android)

    前段时间,领导说客户要一个平板版本的视频播放器,把我们做的一些视频资源放进去,要是本地的:我们部门又没有app开发程序员,正好又前段我在实验egret的app打包功能,就说用egret做(ps:本来想 ...

  5. React的React Native

    React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...

  6. React Native入门——IDE及其它相关基础技术

    关于React Native的开发,当中一个问题是缺少好用的IDE,有些人说不就是JS么,搞一个记事本也就写了,那样尽管牛逼,但事实上还是非常头大的,有一款好的IDE还是能提升开发效率的,这里对几个还 ...

  7. React Native 简介:用 JavaScript 搭建 iOS 应用(2)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  8. 如何用 React Native 创建一个iOS APP?(三)

    前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...

  9. React Native 网络层分析

    文:志俊(沪江Web前端) 本文原创,转载请注明作者及出处 在使用React Native开发中,我们熟练的采用JavaScript的方式发送请求的方式发送一个请求到服务端,但是处理这个请求的过程其实 ...

  10. React Native常用组件Image使用

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

随机推荐

  1. Windows多个应用程序共享全局变量,静态变量

    默认情况下exe不同实例使用copy-on-write技术避免共享数据,比如运行了两个exe,最开始它们使用的都是一份虚拟内存页,然后第一个实例修改了全局变量, 这时候COW就会复制那一页,然后将第一 ...

  2. 数据结构19: BF算法(普通模式匹配算法)

    判断两个串之间是否存在主串与子串的关系,这个过程称为串的模式匹配. 在串的模式匹配过程,子串 T 通常被叫做“模式串”. 普通的模式匹配(“BF”算法) 判断两个串是否存在子串与主串的关系,最直接的算 ...

  3. 再谈hive-1.0.0与hive-1.2.1到JDBC编程忽略细节问题

    不多说,直接上干货,这个问题一直迷惑已久,今天得到亲身醒悟. 所以,建议hadoop-2.6.0.tar.gz的用户与hive-1.0.0搭配使用.当然,也可以去用高版本去覆盖它. log4j:WAR ...

  4. DataSet强类型、TableAdapter的使用

    简答使用可以看https://www.cnblogs.com/namejr/p/10411920.html中的"先来简单介绍dataset和datatable" DataSet强类 ...

  5. clojure with postgres

    主要关注访问pg.不关心其他db 1 clojure.java.jdbc https://github.com/clojure/java.jdbc http://clojure-doc.org/art ...

  6. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_基元类型(三)

    [checked 和 unchecked 基元类型操作] 1.第一种使用方式 UInt32 invalid = )); //OK,不会抛异常 Byte b = ; b = ));//抛出Overflo ...

  7. XtraFinder

    About System Integrity Protection in OS X 10.11 Apple's article . System Integrity Protection blocks ...

  8. vue(5)联动+tab页

    来自:https://juejin.im/post/5a0c191f6fb9a04514639419 1.联动 新增 <input v-model="msg" /> & ...

  9. py---------面向对象进阶

    一.isinstance 和 issubclass isinstance(obj,cls)检查obj是否是类cls的对象,是则返回True class Foo(object): pass obj = ...

  10. Naive Operations

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6315 学习博客:https://blog.csdn.net/SunMoonVocano/article ...