React Native’s attempt

Preface:

Front-end cross-platform has always been my interest, there are three front-end to understand, one is the Web front-end with vue+elementUI; One is the front end of mobile phone with Vue + UNIApp; One is a small program; The front-end desktop is not involved.

So let’s look at RN by analogy; Use the Getting Started Guide to the Big Front End as a reference.

Content: INTRODUCTION to RN, RN use, RN actual combat.

[toc]

RN is introduced

RN is an open source technical framework for cross-platform native application development using JavaScript and the React framework. The design concept is to have a Native user experience while retaining the development efficiency of the React framework.

React

React is a JavaScript library that Facebook opened source in 2013 to create reusable, aggregable Web components. React divides the interface into components and creates complex interactive interfaces by nesting and combining these components. It has the following three characteristics:

• Componentization. By nesting and combining these components, a complex interface can be obtained.
• Declarative design. Declare views using JSX syntax.
• One-way data flow. When the data changes, render the entire UI directly.

JSX grammar

JSX is an extension of the JavaScript syntax used by React to describe UI components. JSX can define React to get properties and elements. JSX can use JavaScript expressions, basically similar to HTML, using paired tags or writing data directly. Such as

const root=<div><h1>hello</h1></div>
ReactDOM.render(root,document.getElementById("root"));
Copy the code

component

Components are at the heart of React, and components divide the UI into separate, reusable modules.

React components define components using ES6 classes, or class components. The class definition component needs to inherit from reac.component. and the render method must be defined inside the class, which returns the reader element that represents the component’s UI. Once the component is defined, use ES6 Export to export the module as the default so that you can use the imported module in other JavaScript files.

State is the internal state of the component, and the corresponding UI is rerendered when state changes. State is initialized in the constructor method when used, and the state is changed in the this.setState method when the state changes.

Functions Functions are similar to method parameters. Functions are used to communicate with react components. Functions are used to transfer data or methods from the parent component to its children for use by their children. That is, the parent component passes parameters to the child component in the form of properties, and the child component receives parameters from the parent component through props.

Component life cycle

Components in RN are similar to Android activities in that they have a lifecycle, and understanding the lifecycle is key to proper development.

Constructor Is the constructor method of an RN component. It is called only once before an RN component is loaded. To use this method, super (props) needs to be called first to initialize some states of the component. This one looks familiar. When I wrote my design pattern notes yesterday, there was also a constructor pattern.

ComponentEillMount This function is called before the initial render (the render function is called) and only once. Perform some service initialization operations and set component status.

Render is the component’s rendering function that returns a JSX or other component to start rendering and generate the virtual DOM. In this function, the values previously initialized in the function can only be accessed through this.state and this.props.

ComponentDidMount is called after the initial rendering and only once. Since the UI has been successfully rendered and is asynchronous, all complex operations such as data requests in this function are performed without UI errors.

ComponentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate just as its name implies.

ComponentWillUNmount is called before the RN component is unloaded. It is mainly used to clean up some useless content, such as releasing resources, unsubscribing, canceling timers and network requests.

RN to use

This chapter describes the development environment, common UI components, network, navigator, data storage, native module development in six parts.

The development environment

Set up the React environment. You need to follow node.js and NPM first. I’ve used VUE before, so I won’t go over it here.

Windows platform RN environment construction. RN would have been better on a Mac (you can’t test on iOS on Windows), but my computer runs Windows. Before setting up an RN environment, you need to install Java and Android SDK on the Windows platform and configure environment variables required for Android development. Install Chocolatey, Node. js, Python2, and React Native CLI. This allows you to create RN applications with RNCLI. I have developed Android applications with Android Studio before, so I won’t go into details.

VScode code editor environment setup. I’ve used VUE before, so all of this goes by the way. Not much to be said.

Common UI components

It feels very similar to Android Studio.

• View component: is the most basic component of RN;
• Image component: used to display many different types of images;
• Text component: used to display text;
• TextInput component: support textInput text box;
• ScrollView component: a series of child components of uncertain height are loaded into a fixed container by rolling operation;
• The ListView component: same as displaying a list of changes that can be scrolled vertically;
• FlatList component: replaces ListView;
• SwipeableFlatList component: Based on the FlatList component to achieve the function of side sliding display menu, and the effect is similar to side sliding delete;
• SectionList component: Lists used to display groups, classes, and sections

network

Mobile application development needs to obtain data and resources from remote addresses, which requires network requests. The Fetch API is integrated in RN. The Fetch API allows flexible and efficient use of HTTP and HTTPS communication.

The navigator

Navigator is a component that manages the rendering and jumping of multiple pages. It can realize the navigation layout of page-turning, TAB TAB and drawer type.

Data is stored

The RN framework provides the AsyncStorage API, which is a simple, asynchronous, persistent key-value storage system (Redis comes to mind). Can replace Android SharePreference and iOS NSUserDefaults.

Native module development

Sometimes apps access platform apis without a corresponding module wrapper in RN. RN designs can write real native code on top of it and have access to all of the platform’s capabilities.

Functions include: obtaining APP version number, social sharing, third-party login, selecting photos from album, etc.

RN of actual combat

After taking notes on RN, I’m not going to try RN in the field, just do a brief overview. Except for work needs, I mainly use VUE family buckets at present. The reason for learning RN here is that the cross-end part in the Big Front End Introduction Guide I bought uses the example of RN, and I intend to apply it by analogy.

In the example of this book, RN is used to develop a complete APP. The main functions include the launch page, login page, registration page, home page, personal center, book list details page and side slide page.

Project creation

Create the project through the CLI using VScode. RN projects mainly include Android projects, iOS projects and JS parts of RN.

Index.js is the entry point to the entire program; Components created by app.js are registered in this file.

App.js is the initial component of the program, which is registered in index.js.

Package. json is basically the script that NPM needs to execute, along with the name and version number of the dependent package.

Android directory: In this directory will generate Android project projects;

IOS directory: In this directory will generate iOS project projects;

APP directory: Stores RN pages and is layered according to different service modules. It contains the common, Component, img, navigate, util and View folders.

Improve the function page

Login: Create a login folder in the View folder and create LoginView component, SplashView component, RegisterView component. Implement the start page component, login page component, registration page component and the route between the page jump appstack.js.

Home page: contains TabBar at the bottom and book list page. Create a book folder in the View folder, and create a TabBottomBar component, a BookView component, a BookListView component,

Personal Center page: Create the Account folder in the View folder and create the MeView component.

Booklist details: Create a BookDetailView component in the Book folder, which mainly includes the function of book review category and the function of Posting comments. The interface is mainly realized by ScrollView and FlatList components.

Swipe page: Create a swipe component in appstack.js

packaging

When releasing an application, you need to generate an APK with a signature. Either you can use the keytool in the bin directory of the JDK to generate a signature, or you can use the visual interface of Android Studio to generate a signature.

conclusion

After learning a little bit about RN, I will be inspired to learn the development of vUE family bucket’s mobile terminal. However, at present, I mainly use the Web front-end, and other cross-terminal parts are only used for reference to understand VUE.

Looking at the source code of good components and analyzing the data structures, algorithms, and design patterns in them can be very enlightening.

In RN’s introduction, we learned react, which can be compared with VUE to improve our understanding of VUE.

In the use of RN, understand the application of React components and feel the process of React simulating Android. React application has new inspiration.

In RN practice, understand RN project creation, page design, packaging this a complete development process. Understand the React framework to implement cross-end process. There are many deficiencies in the current details, but they are sufficient for reference.

That was my first attempt at RN, and I felt that everything was connected by analogy. The more I learned, the easier IT became. I’m probably not going to go into that. However, the cross-end use of VUE will be actual combat.

Sensory learning is first theory, then actual practice, and finally repeated practice. Practice makes perfect. In turn, you can deepen your understanding and continue to practice after deepening your understanding. To use Marxist philosophy is that knowledge has repetition and infinity;

Updated at GitHub

For more: CSDN, GitHub, Nuggets