React Native Development Adaptation experience

It is well known that using react native is a cross-platform Android and iOS App that can be developed. We can use react native to develop Android apps and develop iOS apps, so how do we develop the react native apps that fit both Android and iOS platforms?

In this article I'll talk about the adaptation of Android and iOS in terms of layout, component selection, pictures, performance issues, bugs, and more. Layout

React native is flexbox in terms of layout, so we can keep the Android and iOS styles as consistent as possible to make the code more reusable and compatible. Make good use of Platform.os

To improve code compatibility, we sometimes need to judge the current system's platform and then do some matching. For example, when we use StatusBar to do the navigation bar, the location of the root view under the iOS platform by default is the position of the status bar, we usually want to display a navigation bar under the status bar, so we need to set a height for the StatusBar external container:

<view Style={{height:platform.os = = ' iOS '? 20:0}}>
    <statusbar {... this.props.statusBar}/>
< /view>;

Source

In addition, we need to use the shadow Propsapi when shading the view, and the API supports the iOS platform, and we need to use elevation to set shadows under the Android platform. Watch for API Doc's Android or iOS logo

Not all react native some of the APIs or components of some of the properties and methods are compatible with Android and iOS, in react native API Doc typically identifies the platform supported by the property or method by adding the words "Android" or "ios" in front of some properties or methods, such as:

Android rendertohardwaretextureandroid BOOL
iOS shouldrasterizeios bool

In the above code, rendertohardwaretextureandroid bool only supports the Android platform, iOS shouldrasterizeios bool only supports the iOS platform, All of the time we use these tagged attributes or methods we need to consider whether we need to adapt them to the platform they are not compatible with. Component Selection

React native has developed into a fairly rich component for developers to use, how to select these components from the perspective of adapting to the Android and iOS platforms.

For example, we want to develop an application need to use navigation components, in the react native components have Navigatorios and navigator two navigation components for our choice, from API Doc we can see that Navigatorios only support the iOS platform, Navigator is supported by two platforms.
So if we're going to develop apps that need to fit Android and iOS, then Navigator is the best option.

In addition, similar examples include the tabbarios of the bottom navigation, the toolbarandroid and so on.

Experience: In order to improve the reusability and compatibility of the code, we should pay more attention to whether the component is compatible with Android and iOS when choosing the react native component, and try to choose the components compatible with Android and iOS platform. Picture Fitting

Development of an application need to use the icon. Whether it's Android or iOS, there's a growing number of devices with different resolutions, and we want these icons to fit different resolution devices. For this we need to provide each icon 1x, 2x, 3x Three sizes, react native will be based on the resolution of the screen dynamically choose to display different sizes of pictures. For example: Under the IMG directory there are three kinds of check.png

└──img
    ├──check.png
    ├──check@2x.png
    └──check@3x.png

Then we can use check.png in the following ways:

<image Source={require ('./img/check.png ')}/>

Tip: When using icons with different resolutions, be sure to refer to the standard resolution picture such as require ('./img/check.png '), if we write require ('./img/check@2x.png '), Then the application in the different resolution of the device will only show the Check@2x.png picture, also can not achieve the image adaptation effect. Performance Issues

For most developers who want to use react native development applications, they are concerned about the performance of react native, react native and H5+webview, and the performance comparisons between native applications are: webview Bugs

For react native bugs we can mention issue and pull Request, and we can also focus on react native version release releases, every release will fix some bugs, and add some new features and APIs.

That's what I've learned about react native fit with Android and iOS,
If you are in the adaptation of Android and iOS problems can be in the bottom of this article to leave a message, I saw the timely reply to the OH.
Also can pay attention to my Sina Weibo, or pay attention to my GitHub to get more about react native development of the technical dry goods. Reference: React native Development Video Tutorials