第一步:
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. 钉钉jsapi免登获取code中,出现对应企业没有某域名微应用

    在使用jsapi中.出现 {"errorMessage":"对应企业没有某域名微应用",:"errorCode":"3" ...

  2. 2015苏州大学ACM-ICPC集训队选拔赛(2)1002

    草爷要的雷 Problem Description 扫雷一直是风靡实验室的重要娱乐游戏,在赛前赛后.刷题疲惫的时候,扫一局雷经常可以让队员们感受到身心的振奋,毕竟,劳逸结合刷题,防猝死才是硬道理.但是 ...

  3. css属性 盒子模型

    一.    css属性相关 1.宽和高    1.width可以为元素设置宽度 2. height可以为元素设置高度 3.只有块级标签才可以设置宽度和高度,内联标签并不能设置宽度和高度,及时设置了也不 ...

  4. linux中swap的构建

    一.使用物理分区构建swap 1.分区 [root@server3 ~]# fdisk /dev/vdb Welcome to fdisk (util-linux 2.23.2). Changes w ...

  5. 9.ORM数据访问

    1.Spring对ORM的支持 ORM : 对象关系映射(Object Relational Mapping)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术基于ORM的数据持久层框架有: ...

  6. php数组·的方法1-数组的操作

    //range() 创建一个含指定范围的数组 可设置间隔 var_dump(range(1, 9, 2)); echo '<br>'; //array_combine() 合并两个数组创建 ...

  7. Python 3.6 TypeEror: iter() returned non-iterator of type

    环境:Python 3.6 class Fabs(object): def __init__(self,max): self.max = max self.n, self.a, self.b = 0, ...

  8. HTTP的请求头标签 If-Modified-Since

    一直以来没有留意过HTTP请求头的IMS(If-Modified-Since)标签. 最近在分析Squid的access.log日志文件时,发现了一个现象.就是即使是对同一个文件进行HTTP请求,第一 ...

  9. UnityError SocketException: 以一种访问权限不允许的方式做了一个访问套接字的尝试。

    SocketException: 以一种访问权限不允许的方式做了一个访问套接字的尝试. 以管理员身份运行Unity就可以了,权限不够的问题.

  10. 转:Android开源项目推荐之「网络请求哪家强」 Android开源项目推荐之「网络请求哪家强」

    转载自https://zhuanlan.zhihu.com/p/21879931 1. 原则 本篇说的网络请求专指 http 请求,在选择一个框架之前,我个人有个习惯,就是我喜欢选择专注的库,其实在软 ...