about

  • Wechat official account: Love-Fed
  • My blog: Loeb’s blog
  • Zhihu column: Front hula hoop

preface

With the popularity of React, its mobile development framework React Native has also been favored by many developers, hereinafter referred to as RN. RN enables us to develop cross-platform mobile applications using JavaScript, opening the door for front end engineers to mobile platforms. RN’s official introduction is used to summarize its characteristics: Learn once, write anywhere.

If you know React, learning RN should be a breeze. Because RN and React use the same development language JavaScript and the same design philosophy React, React has added the underlying support of the native platform. In this way, the adaptation of different platforms is left to RN, and developers only need to focus on RN’s application development.

This paper will introduce the principle and implementation of RN mixed development (interaction with iOS and Android platforms), and let you further understand the idea and underlying logic of RN development through flow charts.

Principle and Implementation

1. Start with Hello World

Let’s start with a simple Hello World demo implemented using RN:

The React syntax is familiar, but it also introduces the AppRegistry API and Text components in the React native library. These are the APIs and components RN provides for calling native platforms. It can implement consistent functionality and logic across different mobile devices. The last thing shown in the APP is the Hello World text, which is explained later in the AppRegistry API.

2. React Native

So after seeing the Hello World example, we should roughly know a structure of RN application. We use a legend to explain the solution, as shown in the figure below:

As can be seen from the figure, our entire RN application can be divided into two layers:

  • JavaScript Code layer
  • Native Code layer

It can also be understood as the so-called application layer and bottom layer. The application layer interacts with the underlying platform through the JavaScript bridge layer, and obtains the native APIs, UI components and some custom components of the underlying platform. Examples include the AppRegistry API and Text component introduced in the Hello World example.

Such layering makes application layer development easy, efficient, and cross-platform, keeping the stability and runtime performance of applications close to native platforms.

3. The React Native platform invokes the React Native component

Now that we have an overview of the React Native app structure, let’s take a look at how the React Native component is invoked. Our RN code is going to run in a native APP and that’s going to have to load and run RN components in the native APP in order to mix development and interaction. It’s time to take a look at the AppRegistry API that we’ve just shelved.

Our RN projects typically have an entry file, such as index.js (the old version would have had two: index.ios. Js and index.android.js) that registers the root component and supplies it to the native platform. The registry root component is implemented through the AppRegistry API.

We need to register the component by calling the registerComponent method in AppRegistry from the root component. Once registered, the native platform can run the registered root component through the runApplication method. Note that the registered and running component names must be the same so that the corresponding component can be loaded. For example, in the HelloWorld example, we registered the root component named HelloWorldApp and injected the corresponding component module. We can also register multiple root components in a single entry file at the same time.

4. Load the React Native interface

The ability to load the corresponding root component was mentioned earlier in the introduction of native platform calls to RN components. Is it possible for a native platform to load different pages for the first time only by constantly calling the RN registered root component? The answer is no.

In addition to natively opening a different RN interface by calling a different root component (point 2), we can also call a root component to do this. The only difference is that we need to add identifiers to distinguish different interfaces in initialProperties when calling to render different components, just like jumping to the same route with different parameters on THE URL, rendering corresponding components in the application layer according to the parameters on the route.

In the RN root component, we can use this.props to obtain the parameter object carried by the native platform, such as the viewName in the example, and then render the RN internal component according to the viewName. It is also possible to switch routing modules with React – Navigation. The final choice of loading method depends on the division of the business and the definition of functionality. The first option may be more flexible and convenient.

5. React Native communicates with Native platforms

In a hybrid development mode, we inevitably need to communicate with native platforms. How do we communicate with native platforms in RN? How do you capture or transfer data to native platforms? The diagram below illustrates this process.

In RN, we can refer to the NativeModules API in the React-Native module for data communication by invoking NativeModules. While the native platform returns data to the RN platform based on a callback, the code is as follows:

import { NativeModules } from 'react-native';

const userInfo = NativeModules.UserInfo; // Get the custom user information module

console.log(userInfo.userName); // Prints the user name

const router = NativeModules.Router; // Get the custom routing module

// Call the native route jump method
router.openHome('parameters', (res) => {
    console.log(res); // Prints the returned data
});
Copy the code

With NativeModules, we can flexibly obtain or transfer data to the native platform. At the same time, we can also write different Bridge methods according to business needs to achieve the encapsulation of data communication modules, such as user information module, route jump module and network request module.

6. Redux architecture

In RN projects, in addition to the functions of communication and interaction with the native platform, RN platform itself also needs to achieve some data state management. Here we also need to know about the Redux architecture.

Redux is a container for managing React application state, and it works in RN as well. It uses a single data flow to achieve data management, the only way to change the state is to submit the action operation. This architecture makes our RN project data easy to maintain or expand, and the process of changing data easy to track and capture. The keywords you need to know are as follows:

For details, see cn.redux.js.org/

Of course, you can use other third party libraries to implement similar architectures, such as MOBx, DVA, etc.

7. CSS-in-JS

In addition to the Redux architecture, RN also adds the concept of CSS in JS, shifting the idea of separation of concerns to mixing of concerns. This allows us to write CSS code in JS, but does not violate the previous separation of concerns.

Nowadays, with the popularity of the concept of componentization, there is an increasing demand for maintaining CSS styles from the component level. Css-in-js is the abstraction of CSS using JavaScript inside the component, which can be declared and maintained. Not only does this reduce the risk of writing CSS styles, it also makes development easier. The difference between this and CSS Modules is that CSS style files are no longer required.

The combination of JSX syntax makes writing and maintaining CSS in RN much easier and is a natural consequence of the growing componentization of the Web.

8. Flex layout in React Native

In addition, the Flex layout is officially recommended for RN projects because Flexbox can provide a consistent layout structure across different screen sizes, which also solves the problem of cross-platform layout rendering.

The Flex layout in RN is slightly different from the Flex layout used by our client. For example, flexDirection defaults to column instead of row, Flex can only specify a numeric value, and so on. For an introduction to Flex layout, see: Flex Layout Tutorial: Syntax, Flex Layout Tutorial: Examples

9. React Native hot deployment

Finally, let’s talk about hot deployment in RN, which is one of the most important reasons to develop an APP in RN. Compared with traditional APP updates, most of them require third-party review process, which may be slow or not timely. It is a common problem that the bug that needs urgent repair cannot be updated in time, leading to direct economic losses. However, the hot deployment of RN can solve or mitigate the impact of this problem to a certain extent. So how does that work?

The left part of the figure shows the hot deployment process for users accessing RN applications. If the resource package is not updated, the local cache resources will be read. If the developer updates the resource package on the server to solve the bug, the APP will cache the resource package after being pulled, and the update will be made after the user enters the APP next time. This is the flow of RN hot deployment.

In local development, it is not difficult to find that when we modify the code in the running RN project and enter RN page from APP again, the local terminal will load the updated resource data again, which is also the embodiment of RN hot deployment.

Similarly, online hot deployment needs to upload our packed RN resources to the server for APP to read.

We can manually execute the packaging, upload and release process. Of course, in order to reduce human intervention and realize front-end automation, we can also hand over the process to the construction platform for automatic packaging and deployment, which needs to build a background system for management.

conclusion

This paper introduces the principle and implementation logic of React Native hybrid development. Only by first understanding the principle, can the project be effectively invested in the development. As for the function realization of RN, you can read the official documents directly. Here I also provide some additional reference materials about RN:

  • React-native Learning Guide
  • Share 50 complete React Native projects
  • React Native detailed how-to guide for all developers
  • Learn React Native in 30 days

Note: Some of the illustrations in this article are from the book React Native Mobile Development