Like and comment, support a wave, don’t make me lonely

Attention is also great encouragement to come here and not get lost

Write with heart, share skills, share experience and grow together

Author: Knock code every day [original]

Yo ho ~, here I come, this is my first article, of course is the welfare, the project code can run directly used ah, this cheap to squander it. Okay, let’s get a little practical, this project is actually a video course I’m teaching (read the article to learn everything, watch the video if you need to).

Here, all knowledge is reorganized in the form of words, which is more than the content of the video, mainly including two themes:

Implement a navigation framework similar to QQ using React Navigation

Two, two kinds of video full screen principle and code.

This article is just the beginning of this topic, and there will be a detailed design, implementation, and rationale article for each technology point based on these two topics. Let’s brag about it. Hey, hey, hey

Mukevideo overview

Mukevideo uses React Native to implement a video player compatible with ios and Android with a complete QM-like navigation framework

Install

// code cloud address
git clone https://gitee.com/codeveryday/mukevideo
// Or github address
git clone https://github.com/codeverydaya/mukevideo.git
cd mukevideo
yarn install
Copy the code

Third-party libraries

The library name version describe
react-native 0.59.8 Rn primary library, which provides basic RN functionality
react-native-video 5.0.0 Video player component
react-native-linear-gradient 2.5.6 Gradient assembly
react-native-orientation 3.1.3 Controls the orientation of the screen
react-navigation 3.11.1 For APP navigation
react-native-gesture-handler 1.3.0 React Navigation gesture processing

Function is introduced

  • Adjust double speed playback
  • The video is paused
  • Resolution adaptation
  • Adjust the playback progress
  • Animation effect making
  • Two implementations of full screen
  • React Navigation builds a complete navigation framework similar to QQ

rendering

Set pieces

This project is a video course (React Native development player) recorded by me. The course mainly explains the content, and you can learn it if necessary

Course content

  1. React Navigation
  2. React Navigation is used in combination, similar to QQ navigation
  3. React Navigation principle in depth and source code interpretation
  4. Use and configuration of react-native video
  5. Video player full screen adaptation
  6. React Native combines touch event handling with the player

The course catalog

chapter section
The first chapter is guided learning and environment construction 1.1 introduction
1.2 MoOCs video function display
1.3 Environment Construction
1.4 Environment and project structure
React Navigation 2.1 React Navigation Overview
2.2 React Navigation
2.3 Detail stack navigator
2.4 In depth react Navigation principle
2.5 The other three navigators are briefly described
2.6 Implementation of similar QQ navigation framework
2.7 the source code to read
Chapter 3 Product design – video player 3.1 Requirement analysis and structure construction
3.2 UI realizes the video control layer
3.3 Explicit and implicit of the video control layer
3.4 Touchable progress bar
3.5 Full-screen Solution 1
3.6 Full-screen Implementation Scheme 2
Chapter four Course summary 4.1 Course Summary

conclusion

The above is the main content of this project, series of articles, more dry goods on the way, without reservation, boast here, bone white, next cheap, ha ha ha ~