react native实现兼容Android与ios的视频播放器

呦吼～，我来啦，这是我的第一篇文章，当然是福利啦，项目代码可以直接运行使用的呀，这种便宜尽情挥霍去吧～。好了装嫩结束，来点实际的，这个项目其实是我主讲的一门视频课程(看文章就可以学到所有知识，若需要可以看视频)。

在这里通过文字的形式重新梳理所有知识，比视频内容知识点更多，主要包含两大主题：

一、使用react navigation实现一个类似qq的导航框架

二、两种实现视频全屏的原理和代码。

这片文章只是这个主题的一个开头，接下来会基于这两个主题，每个技术点都会有一篇详细的设计、实现以及原理的文章。下面先来吹嘘一番吧～，嘿嘿嘿

mukevideo概述

mukevideo是一个使用react native实现一个兼容ios，android的视频播放器并带有完整的类似qq的导航框架

Install

//码云地址
git clone https://gitee.com/codeveryday/mukevideo
//或者github地址
git clone https://github.com/codeverydaya/mukevideo.git
cd mukevideo
yarn install

第三方库

库名字	版本	描述
react-native	0.59.8	rn主库，提供rn基础功能
react-native-video	5.0.0	视频播放组件
react-native-linear-gradient	2.5.6	渐变色组件
react-native-orientation	3.1.3	控制屏幕的方向
react-navigation	3.11.1	用于app导航
react-native-gesture-handler	1.3.0	用于react navigation手势处理

功能介绍

• 调节倍速播放
• 视频的播放暂停
• 分辨率的适配
• 播放进度的调节
• 动画的效果制作
• 全屏的两种实现
• react navigation构建出一个完整的类似qq的导航框架

效果图

番外篇

本项目是我录制的一门视频课程(React native开发播放器)，课程主要讲解一下内容，大家有需要可以去学习

课程内容

1. react navigation常用导航器
2. react navigation导航器组合使用，实战类似qq导航器
3. react navigation原理的深入与源码解读
4. react-native-video的使用与配置
5. 视频播放器全屏适配
6. react native触摸事件处理与播放器的结合

课程目录

章	节
第一章 导学与环境构建	1.1 导读
	1.2 慕课视频功能展示
	1.3 环境搭建
	1.4 环境与项目结构
第二章 react navigation构建导航框架	2.1 react navigation概述
	2.2 初识react navigation
	2.3 详解栈导航器
	2.4 深入react navigation原理
	2.5 其他三种导航器略讲
	2.6 类似qq导航框架的实现
	2.7 抛砖引玉的源码阅读
第三章 产品设计—视频播放器	3.1 需求分析与结构构建
	3.2 UI实现视频控制层
	3.3 视频控制层的显隐
	3.4 可以触控的进度条
	3.5 全屏实现方案一
	3.6 全屏实现方案二
第四章 课程总结	4.1 课程总结

总结

以上就是这个项目的主要内容，系列文，更多干货正在路上，毫无保留，点关注,不迷路，吹嘘就到这里，骨朵白，下次贱，哈哈哈～