ReactNative+TypeScript Himalaya development App complete without cloud disk sharing

RN + TS was used to develop a listening App. From requirement analysis to function realization, I led everyone step by step to complete functions and learned how to solve practical development problems. This is a complete example of project development. Through navigator, DVA status management, icon generation component, custom navigator, animation effects, audio and video playback, dynamic navigation and dynamic model, local data persistence and a series of functions, to help you have the ability to independently develop a complete RN application

Chapter 1 Course Introduction





This course explains why you should develop apps using React Native + TypeScript.


1-1 Course guide and Trial


Chapter 2: ES6, React, React Native





This chapter will explain the basic knowledge necessary before learning this course, mainly explaining ES6, RN and other necessary knowledge points, specially prepared for novice students, these contents will be used in the actual combat later.


2-1 Environment construction


2-2 Building of Android development environment


2-3 Create a project


2-4 Introduction to ES6 and variable declarations


2-5 ES6 template strings and function default parameters


Arrow functions for ES6


2-7 ES6 deconstruction assignment, object literals, expansion syntax, remainder syntax


2-8 ES6 in class


2-9 ES6 class inheritance


2-10 Promise


2-11 ES6之generator


2-12 ES6 modules


2-13 React


2-14 Introduction to RN


2-15 Breadth and height of the basics of RN


2-16 Basic components and styles of RN basics


2-17 RN Layout (1)


2-18 RN Layout (2)


2-19 RN-based touch events


2-20 RN based network request


Chapter 3 TypeScript basics





This chapter will explain the basic knowledge necessary before learning this course, mainly explains the essential knowledge points of TS, specially prepared for novice students, these contents will be used in the actual combat.


3-1 An introduction to TypeScript


3-2 TypeScript non-primitive types


3-3 TypeScript functions


3-4 TypeScript interfaces


3-5 TypeScript generics


Chapter 4 Project analysis





This chapter mainly analyzes the application of listening to this course, explains the process of the whole project, and analyzes the requirements, modules and technologies of the application of this course


4-1 Project analysis


Chapter 5 project Initialization





This chapter is really the beginning of application development. There are also two good third-party projects I used in my work, which can be used to set multi-environment Settings and absolute paths, which can help us reduce some tedious and error-prone work.


5-1 Project initialization


More than 5-2 environment


5-3 Absolute path


Chapter 6 Interface management tools





This chapter focuses on how to deploy yAPI locally and how to use it


6-1 Interface documents


Chapter 7 new navigator, React-Navigation5.0





This chapter describes the basic configuration and use of the 5.0 React-Navigation, stack and bottom TAB navigators


7-1 Basic introduction to navigator


7-2 Install navigator and try


7-3 Stack navigator (1) A trial


7-4 Stack navigator (2)


7-5 Label navigator


Chapter 8 State Management Dva





This chapter mainly explains dVA, the packaging library of Redux and Redux-Saga, as well as the integration of DVA and React-Native and plug-in loading


8-1 Introduction to Status Management (REDUx)


8-2 Introduction to Status Management (Redux-Saga)


8-3 integrated Dva – core


8-4 Basic usage of Dva


8-5 Dva Asynchronous operation


8-6 Dva plug-in DVa-loading


Chapter 9 home page module





This chapter is the formal start of the business logic development, this chapter will teach you to complete the home page module functions, such as the wheel, gradient, interface request, customize the top label navigator TAB bar


9-1 Home page display and functional analysis


9-2 Bottom label navigator font icon


9-3 Top label navigator


On the 9-4 round broadcast chart


9-5 Round seeding diagram


9-6 Network requests to data, mapped to components via DVA


9-7 Guess you like it


9-8 guess you like it


9-9 Home Page List (1)


9-10 Home Page List (2)


9-11 Home page list optimization with homework


9-12 Pull-up loading for more


9-13 Drop down refresh


9-14 Customizing top label components


9-15 Customizing the top label component layout


9-16 Custom top label component gradient effect


9-17 Custom top label gradient component fade out


9-18 Perfection of custom components


Chapter 10 classification module





This chapter will mainly use the DVA state management library to complete the function of adding, deleting, changing and looking up categories and expand the function of sorting, through these several classic business logic to help you better master the DVA library, in addition to learning the dynamic top label navigator and dynamic generation of DVA model functions.


10-1 Functional demonstration and analysis of category modules


10-2 Data structures and local data stores


Model for the 10-3 category module


10-4 Layout and Style of Category Pages (1)


10-5 Layout and Style for Category Pages (2)


10-6 Add a button in the upper right corner of the title bar and switch the editing status


10-7 New And Deleted Categories (1)


10-8 New And Deleted Categories (2)


10-9 drag-and-drop functionality for categories


Dynamically generating tag Navigator and Model (1)


Dynamic Generation of tag Navigator and Model (2)


10-12 Homework assignments


Chapter 11 channel module





This chapter mainly learns gesture response system. Through gesture response system, when the head is visible, the FlatList in the TAB TAB component cannot be rolled when the finger slides upward, and the FlatList in the TAB TAB component can be rolled only when the head component is not visible. When the header is not visible, the header does not slide until the FlatList reaches the top, and the TAB bar will fade in and out according to this scroll.


Functional demonstration and analysis of channel 11-1 module


11-2 YAPI creates interfaces and models


11-3 Channel Information Component (I)


Channel 11-4 Information Component (II)


Channel 11-5 page Tab (top)


Channel 11-6 page Tab (bottom)


11-7 React-Native animation


11-8 Gesture Response System (1)


11-9 Gesture Response System (2)


Gesture response System (3)


Gesture response System (4)


11-12 React-native Tab-View component optimization and homework


Chapter 12 channel details module





This chapter mainly studies the audio playback, and displays the current audio playback duration through the progress bar, as well as the previous song, the next song, play, pause functions and bullet screen


12-1 channel details page function introduction and analysis


12-2 Full screen mode of navigator (Part 1)


12-3 Full screen mode of navigator (Part 2)


12-4 Audio Playback (1)


12-5 Audio Playback (2)


12-6 Audio Playback (3)


12-7 Audio Playback (4)


12-8 Pause and Progress bar display playing time (Part 1)


12-9 Pause and Progress bar display playing time (part 2)


12-10 Function of Previous Song and Next Song (I)


12-11 Function of Previous Song and Next Song (II)


12-12 Zoom and gradient of the image


Barrage (1)


Barrage (2)


Barrage (3)


Barrage (4)


12-17 Practice after class


Chapter 13 shows the play TAB of the bottom TAB navigator and the play button outside of the navigator





This chapter focuses on how to display a standalone component outside of the navigator and animate it. The system determines whether to display the page based on the page and playback status


13-1 Describes and analyzes the functions of the label play button at the bottom


13-2 Customize bottom Label button (top)


13-3 Customize bottom Label button (bottom)


13-4 Play button outside the page


13-5 Jump function of play button


13-6 Practice after class


Chapter 14 I listen module





This chapter focuses on local data persistence, the use of RealMJS, by recording the user has played audio and played to the time, and then presented in the form of a list.


14-1 I listen to the function display and analysis of the module


14-2 installation realm


14-3 Save the played audio


14-4 Querying realm data


14-5 Delete realm data


14-6 Update the table structure and migrate data


Chapter 15 discovery module





This chapter focuses on displaying videos in FlatList and video playback functions. You can only play one video at a time, which needs to be optimized, and you need to pause the audio while the video is playing.


15-1 Function description and analysis of the Discovery page


15-2 Discovering the model of the module


15-3 FlatList display video


15-4 Pause other video and audio playback


15-5 Practice after class


Chapter 16 Account module





This chapter focuses on checksum submission of forms and the need to save login status so that users are not reminded of the need to log in again when they enter the application.


16-1 Function display and analysis of the account module


16-2 Model of the account module


16-3 My page UI and jump function


16-4 Login page Form component Formik


Form 16-5 Check library YUP


16-6 Encapsulate the form input box


16-7 Displaying User Information and Saving Login Status (Part 1)


16-8 Displaying User Information and Saving Login Status (Bottom)


16-9 Functional improvement and after-class exercises


Chapter 17 is packaged for release





This chapter focuses on application packaging and distribution.


Chapter 18 Course Summary





This chapter will be a review of the course, and if you have any questions, please come to the Q&A section. I hope that those who are short of work will find a job and those who have a job will get a raise.





This course is constantly being updated