📝 Without 2 years of React Native development experience, you will never encounter these pits

If you like my article, I hope to like it 👍 Collection 📁 Comment 💬 Three consecutive support, thank you, this is really important to me!

When developing React Native, if you just write some simple pages, you can basically document reactnative.dev , but there are hundreds of APIs for React Native, and there is no certain development experience. It is true that the key points will not be grasped when new demands are made.

This article summarizes the problems I encountered in my personal development of React Native and some unpopular APIs. If someone who is destined to read this article and solve the actual problems, it would be best.

1. Built-in components

The content of this section is mainly to React Native Core Components , mainly to talk about some uncomfortable development experience, to help later people avoid pits.

1.View

View component has supported half of the RN page. During the use, there are several attributes that are relatively unpopular but personally think they are quite useful.

hitSlop attribute: This attribute can expand the touch range of the View, and it is still very profitable to use on some small buttons
pointerEvents property: This property is similar to the pointer-events property of CSS, which can control View's response to touch events

2.Text

Text component is a very commonly used attribute, there are a few small points that require developers to pay attention to:

swallowing phenomenon on Android. The phenomenon is that the last character is not displayed on some models for unknown reasons. The current compromise is to add an extra space or zero-width character to the last line of the text
Android has a property called includeFontPadding , setting it to false can reduce the padding above and below the text (this padding is reserved for corner characters, such as H₂O, 2ⁿᵈ), which can better achieve vertical vertical center alignment.
When realizing the center alignment of the text, it is best to nest a Text View , and then set some flex attributes View control the center alignment of Text In Web development, the lineheight attribute is often used to achieve vertical center alignment of a single line of text. This implementation is originally a stopgap measure, and it does not work well in RN. best practice is to use the flex attribute to achieve center alignment
font configuration is relatively troublesome, there is a good tutorial Ultimate guide to use custom fonts in react native can refer to

3.TextInput

Input box components are also very commonly used attributes, and there are several uncomfortable points for personal use:

The default style of iOS/Android is gap is relatively large. If you don’t package it, you will write a lot of platform-related code.
placeholder the text of 061527e3d45488 is relatively long, if a line break occurs, there is no API to control its line height
If there are multiple TextInput components on a page, they need to be ScrollView components to realize the function of switching the focus of TextInput

4.Image

I personally think that the performance of the Image component is very good, but students who are getting started with some details may not be used to it:

There are not as many filter properties as CSS, only blur effect is supported, but I have basically never encountered image filter requirements
When loading a network picture, must specify the picture width and height , if you don’t set the size, the default is 0
Image size on the Android very large when (seemingly 5000px?), The picture will not come out loaded directly, but this scene very little, basic tile map will load step, otherwise the OOM will cause big picture
iOS/Android support for webp is not available out of the box, and needs to be configured separately:
- iOS uses SDImageWebPCoder provide support
- Android uses fresco provide support
- For the specific configuration scheme, please refer to react-native-webp-format
Android does not support point nine pictures

5.Modal

The Modal component previously provided by the RN official has an obvious problem, Modal cannot cover the status bar . For example, we made a pop-up window, the background is black and translucent, but the status bar is white, which is very split in the senses.

Fortunately, the 0.62 version has a statusBarTranslucent attribute, which can be overlaid on the status bar by setting it to true. If it is below 0.62, you need to change some configurations, you can refer to this answer from stackoverflow: How to hide the statusBar when react-native modal shown?

6.ScrollView

The ScrollView component is a sliding container component provided by RN. There are several relatively unpopular but very useful APIs. I will explain here.

The first is the ceiling function , which involves the StickyHeaderComponent and stickyHeaderIndices which can achieve the effect of rolling ceiling, which is very easy to use.

The second is the automaticallyAdjustContentInsets attribute. Sometimes there will be an inexplicable blank area on the . This is implemented by the iOS Native layer. I did not test the specific trigger timing of RN in detail, but basically turn off this attribute. It can be circumvented.

7.FlatList

FlatList mainly pays attention to 3 points:

FlatList provides custom header/bottom/blank/divider components, which is more thorough than general Web component packaging
React will require the addition of key to improve the diff performance when rendering the list, but FlatList encapsulates more, you need to use keyExtractor to specify the key
The content of FlatList performance optimization is not very well written on the official website. I wrote a more understandable, , students in need can find out

Two, built-in API

The content of this section is mainly to React Native API , mainly to talk about some uncomfortable development experience, to help later people avoid pits.

1.AppState

AppState this API in the actual development is mainly listening APP Taiwan before and after switching of the API performance on iOS semantically, but on Android have a problem, because AppState in achieving Android terminal is actually based Activity life cycle of.

For example, the background state provided by AppState is actually based on Activity's onPause() , but according to the Android documentation, there are several scenarios when onPause()

APP switch to the system background (in line with expectations)
The current RN container Activity covers the new Activity (not in line with expectations)
The current RN container Activity upper layer covers Dialog, such as the permission application pop-up window (Dialog is essentially a translucent Dialog) (not in line with expectations)

In summary, when using AppState to monitor APP status, you must fully consider whether these "abnormal" behaviors of Android will cause program bugs.

2.Permissions

The authority management of the APP platform is a very cumbersome thing. RN officially only provides PermissionsAndroid , and does not provide a cross-platform authority management API, which is very inconvenient to use. Here I suggest to use the react-native-permissions library, which is more convenient to manage permissions.

3.Event

RN official online without exposing Event-related API, but RN has Foreign export the DeviceEventEmitter the "publish - subscribe" event management API, is also very simple to use, you can use the following case.

import { DeviceEventEmitter } from 'react-native';

// 触发
DeviceEventEmitter.emit('EVENT');
// 监听
const listener = DeviceEventEmitter.addListener( 'EVENT', () => {});
// 移除
listener.remove()

4.Animated

To be honest, the cost of mastering RN's animation API is relatively high. The official API alone involves Animated , LayoutAnimation , Easing , useNativeDriver , and the distribution of documents is relatively scattered. It is difficult for beginners to build a complete mind map in their minds.

If you want to build higher-performance animations, you have to learn APIs of third-party libraries such as react-native-gesture-handler , react-native-reanimated

Here I recommend React Native Animation Book teaching. After reading it, you will have an overall understanding of RN's animation API.

Third, the third-party Library

React Native has successively delivered some non-core components to the community for maintenance, such as webview , async-storage etc. There are also some unofficial but very useful components, such as react-native-svg , react-native-camera and so on.

In addition to these Native and related third-party libraries, JS community host-independent JS library also be used, for example lodash , redux other pure logic library.

Since there are too many third-party libraries, I will not list them all here.

Four, special effects

React Native’s style attribute only provides basic layout attributes, such as flexbox layout, fontSize, etc. But for many CSS3 special effects properties, React Native basically has to introduce third-party libraries. I sorted out the attributes and plug-ins used by several commonly used UI special effects for the convenience of developers.

1. Fillet effect

This directly uses the borderRadius View styles attribute. RN also supports setting the individual arcs of the four corners of the View.

2. Blur effect

The blur effect needs to use @react-native-community/blur the official RN community library. This RN blur library is blur() property of CSS. CSS only supports Gaussian blur. This library supports at least three blur effects, but the specific effects still need to be discussed with UED.

3. Shadow effect

The shadow can use Shadow Props provided by RN, but it is sub-platform:

iOS provides shadowColor , shadowOffset , shadowOpacity and shadowRadius four properties, and CSS box-shadow property entirely on the standard, meet most of the scenes
Android only provides shadowColor and elevation , and in a strict sense, elevation actually means "elevation angle", which is an attribute provided by Android, which simulates the shadow changes caused by the top-down lighting in reality. . Although there are a set of theories, in real development, you will find that elevation are very ugly, which is completely different from iOS. I generally recommend using gradients instead of shadows.

4. Gradient effect

A third-party library is used for gradients: react-native-linear-gradient , as the name of the library, this repository only provides a "linear gradient" solution. Based on personal experience, linear gradients are sufficient in most cases. If you want to use "radial gradient", you can use the RadialGradient component of react-native-svg

Five, visualization

In addition to the most basic <p/> <img/> tags, the web platform also supports SVG and canvas with higher degree of freedom drawing APIs. They support most visualization scenarios, such as various custom images and charts. Here is a brief introduction to some third-party libraries that are benchmarked against Web in RN.

1.SVG

RN's SVG support is based on the react-native-svg repository. In terms of personal experience, it is basically the same as the SVG function of the Web. In addition to self-drawing some custom SVG, its more function is to support the use of upper-level charts as a bottom-level library.

2. Class canvas

There is no concept of canvas in RN, and there is no good substitute for canvas on the market. Some developers came up with react-native-skia , and some demos showed . But it is currently an experimental project, and the risk of the production environment is still too great. However, in my personal experience, many drawing functions can be implemented based on SVG, and it should be rare that canvas must be used.

Based on skia, you can integrate flutter into it, and you can play matryoshka games :)

3.OpenGL support

On the mobile platform, WebGL is the browser platform's encapsulation of OpenGL ES. RN itself is already very close to the Native platform. There is no need to support WebGL, just support OpenGL ES directly.

Currently, RN's support for OpenGL is based on gl-react , and the underlying adaptation layer is based on expo-gl . There is a gl-react demo tutorial , readers in need can learn it.

Because the individual has not done RN 3D related requirements, it is impossible to get an accurate evaluation of the library, and readers need to judge by themselves

4. Chart function

The chart is a very realistic requirement, and there are often report requirements in some B-side scenarios. Because RN only supports SVG, the charts of RN are basically drawn based on SVG.

There are many SVG-based chart libraries on the Web, but there may be few that RN can use. main reason for 161527e3d54e49 is that the host environment of RN and Web is different. . Some chart libraries may use Web-specific APIs (such as getElmentById ). ECharts is definitely not available.

The libraries that can be migrated generally need to meet two conditions:

pure logic : D3.js Some pure logic libraries, only use the language capabilities of JS, such as d3-scale
platform-independent : built directly on React, without using platform-specific APIs, such as victory-native

video tutorial based on the stock box chart implemented by D3.js. Interested readers can learn about it.

5. Poster function

Poster sharing is a very common front-end function nowadays. Web pages are basically based on canvas to generate shared posters. Although RN does not have a good canvas API, it has a good library- react-native-view-shot , yes Generate a picture from the View written by RN. By borrowing this library, images can be generated locally in the APP, and the poster function can be realized instead.