呦吼～，我来啦，这是我的第一篇文章，当然是福利啦，项目代码可以直接运行使用的呀，这种便宜尽情挥霍去吧～。好了装嫩结束，来点实际的，这个项目其实是我主讲的一门视频课程(看文章就可以学到所有知识，若需要可以看视频)。
在这里通过文字的形式重新梳理所有知识，比视频内容知识点更多，主要包含两大主题：
一、使用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开发播放器)，课程主要讲解一下内容，大家有需要可以去学习
课程内容
- react navigation常用导航器
- react navigation导航器组合使用，实战类似qq导航器
- react navigation原理的深入与源码解读
- react-native-video的使用与配置
- 视频播放器全屏适配
- 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 课程总结 |
总结
以上就是这个项目的主要内容，系列文，更多干货正在路上，毫无保留，点关注,不迷路，吹嘘就到这里，骨朵白，下次贱，哈哈哈～
