第一步:
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. [比赛|考试]nowcoder 小白月赛7

    牛客小白月赛7 比赛地址.本次比赛我切了8道(ACM赛制),rank(20). 反思:刚入手ACM赛,光追求刺激了,没有总结ACM赛制的经验.是应该多提交>..还是少提交...小白赛还有两道不会 ...

  2. CF1101C Division and Union 线段相交问题

    #include<iostream> #include<cstdio> #include<algorithm> #include<cstdlib> #i ...

  3. 5.Min Stack(能返回最小数的栈)

    Level:   Easy 题目描述: Design a stack that supports push, pop, top, and retrieving the minimum element ...

  4. vue.js路由学习笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. C++_对象之间的关系与继承

    派生类和基类之间的特殊关系是基于C++继承的底层模型的. 实际上,C++有3种继承方式:公有继承.保护继承.私有继承. 公有继承是最常见的关系,它建立一种is-a的关系,即派生类对象也是一种基类,可以 ...

  6. hdu-4513吉哥系列故事——完美队形II--最长回文

    吉哥系列故事——完美队形II Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)To ...

  7. hive export import

    create database target_db; drop table target_db.kylin_account; dfs -rm -r /tmp/kylin_account; export ...

  8. ETL的两种架构(ETL架构和ELT架构)

     ETL ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.ETL一词 ...

  9. 查看正在运行的sql

    SELECT [Spid] = session_id ,ecid ,[Database] = DB_NAME(sp.dbid) ,[User] = nt_username ,[Status] = er ...

  10. windows系统打开火狐浏览器提示“无法加载你的firefox配置文件”

    win7系统自带IE浏览器,还是有部分用户使用不习惯,选择下载第三方浏览器,比如:火狐.谷歌.360浏览器等.最近有Win7系统用户在重新安装火狐浏览器后发现打不开,并提示“无法加载你的firefox ...