第一步:
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. UVA 10806

    #include<iostream> #include<algorithm> #include<cstdio> #include<cstring> us ...

  2. Linux中apache服务

    httpd访问控制生成共享文件vim var/www/html/cq/index.html编辑配置文件 vim /etc/httpd/conf/httpd.conf<Directory &quo ...

  3. mapreduce去重

    现有一个某电商网站的数据文件,名为buyer_favorite1,记录了用户收藏的商品以及收藏的日期,文件buyer_favorite1中包含(用户id,商品id,收藏日期)三个字段,数据内容以“\t ...

  4. 数据库迁移expdp impdp 与 OGg 搭建

    1.long 字段的无法使用OGG 同步 2.clob字段的导入导出Bug , 生产使用network-link 导入导出太慢了,本地导入导出速度会快3到4倍 .但是测试环境的情况却相反 测试环境和生 ...

  5. Mybatis学习笔记8 - resultMap自定义结果集映射规则

    一.resultMap自定义结果集映射规则 示例如下: 接口定义: package com.mybatis.dao; import com.mybatis.bean.Employee; public ...

  6. Kubernetes中的nodePort,targetPort,port的区别和意义

    1. nodePort 外部机器可访问的端口. 比如一个Web应用需要被其他用户访问,那么需要配置type=NodePort,而且配置nodePort=30001,那么其他机器就可以通过浏览器访问sc ...

  7. RTT之AT命令组件

    包含客户端和服务器:用于GPRS和3G的通讯命令格式.四种基本功能 测试功能:AT+<x>=? 用于查询命令参数格式及取值范围: 查询功能:AT+<x>? 用于返回命令参数当前 ...

  8. TCP连接的ISN、连接建立超时及TCP的长短连接

    问题现象: 一.TCP连接的ISN         之前我们说过初始建立TCP连接的时候的系列号(ISN)是随机选择的,那么这个系列号为什么不采用一个固定的值呢?主要有两方面的原因 防止同一个连接的不 ...

  9. Murano Weekly Meeting 2016.06.07

    Meeting time: 2016.June.7 1:00~2:00 Chairperson:  Kirill Zaitsev, from Mirantis Meeting summary: 1.A ...

  10. Android多线程源码学习笔记一:handler、looper、message、messageQueue

    最近在学习Android多线程相关知识的源码,现在把自己的笔记整理一下,写出来加深印象. Android多线程通讯的核心是handler.looper.message.messageQueue,这篇文 ...