react native compatibility with ios Android video player

~ Yo roar, Here I am, this is my first article, of course, it is welfare, project code can be run directly use it, the cheaper enjoy squandering go ~. Well Zhuangnen end to the actual point of this project is actually my speaker of a video course ( 看文章就可以学到所有知识，若需要可以看视频).

Here to sort out all the knowledge in the form of text, video content knowledge points more than, comprise two main themes:

First, using a similar implement react navigation navigation frame qq

Second, the two implementations of the principle of full-screen video and code.

This article is just a beginning of this topic, the next will be based on these two topics, and each will have a detailed technical points in the design, implementation and principles article. The following first to brag about it - hey hey hey

mukevideo Overview

mukevideo is implemented using a compatible react native ios, android video player and the like qq complete with navigation frame

Install

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

Third-party libraries

Library name	version	description
react-native	0.59.8	rn main library that provides basic functionality rn
react-native-video	5.0.0	Video playback component
react-native-linear-gradient	2.5.6	Gradient component
react-native-orientation	3.1.3	Directional control of the screen
react-navigation	3.11.1	For app navigation
react-native-gesture-handler	1.3.0	React navigation process for a gesture

Features

• Adjust speed playback
• Video playback is paused
• Resolution of adaptation
• Adjust the playback progress
• Animation effects production
• Two kinds of full-screen realization
• react navigation construct a complete navigation frame is similar to qq

Renderings

Side story

This project is I recorded a video course ( React Native Development player ), explain the main course content, you may need to learn

Course content

1. Common react navigation navigator
2. react navigation navigator combination, similar qq actual navigator
3. Depth react navigation principle and source of interpretation
4. react-native-video usage and configuration
5. Video player full screen adaptation
6. Combined react native touch event handling and player

Course Catalog

chapter	Festival
Chapter I and Environmental building	1.1 Introduction
	1.2 Mu class video capabilities show
	1.3 environment to build
	1.4 environment and project structure
Chapter react navigation build navigation frame	2.1 react navigation Overview
	2.2 acquaintance react navigation
	Detailed stack Navigator 2.3
	2.4 depth react navigation principle
	2.5 The other three navigators speak a little
	2.6 to achieve a similar navigation frame qq
	2.7 initiate reading source
Chapter III product design - Video Player	3.1 Requirements analysis and structural building
	3.2 UI for video control layer
	Explicit and implicit video control layer 3.3
	3.4 can touch the progress bar
	3.5 implementations a full-screen
	3.6 Option II achieve full screen
Chapter Four Lessons Learned	4.1 Lessons Learned

to sum up

These are the main contents of the project, series of text, more dry goods is on the way, without reservation, point concerns not get lost , boast on here, Guduo white, the next time cheap, ha ha ha ~