How to develop a React Native app for both Android and iOS

As we all know, React Native can be used to develop cross-platform Android and iOS apps. We can use React Native to develop Android apps as well as iOS apps, so how can we make the React Native apps we develop adapt to both Android and iOS platforms?

[[215749]]

In this article, I will talk about the adaptation issues between Android and iOS from several aspects, including layout, component selection, images, performance issues, bugs, etc.

layout

React Native uses Flexbox for layout. In order to make the code more reusable and compatible, we can keep the styles of Android and iOS as consistent as possible.

Take advantage of Platform.OS

In order to improve the compatibility of the code, we sometimes need to determine the current system platform and then make some adaptations. For example, when we use StatusBar as a navigation bar, the root view on the iOS platform occupies the position of the status bar by default. We usually want to display a navigation bar under the status bar, so we need to set a height for the external container of StatusBar:

 < view style={{height: platform.os === &#39;ios&#39; ? 20:0}}>
    <statusbar {...this.props.statusbar} >
 ;</statusbar {...this.props.statusbar} ></ view style={{height: platform.os === &#39;ios&#39; ? 20:0}}>

source code

In addition, when setting shadows for views, we need to use the Shadow Props api, which supports the iOS platform. To set shadows on the Android platform, we need to use elevation.

Pay attention to the android or ios logo in the api doc

Not all properties and methods of some React Native APIs or components are compatible with Android and iOS. In the React Native API doc, the words android or ios are usually added in front of some properties or methods to identify the platforms supported by the property or method, such as:

 android renderToHardwareTextureAndroid bool
 ios shouldRasterizeIOS bool

In the above code, renderToHardwareTextureAndroid bool only supports Android platform, and ios shouldRasterizeIOS bool only supports iOS platform. So when we use these marked properties or methods, we need to consider whether we need to make corresponding adaptations for incompatible platforms.

Component Selection

React Native has developed to the point where there are already quite a lot of components for developers to use. So how do you select these components from the perspective of adapting to Android and iOS platforms?

For example, if we want to develop an application, we need to use the navigation component. In the React Native component, there are two navigation components, NavigatorIOS and Navigator, for us to choose from. From the api doc, we can see that NavigatorIOS only supports the iOS platform, while Navigator supports both platforms.

So if the application we want to develop needs to be adapted to Android and iOS, then Navigator is the best choice.

In addition, similar examples include TabBarIOS and ToolbarAndroid for bottom navigation.

Experience: In order to improve the reusability and compatibility of the code, it is recommended that you pay more attention to whether the component is compatible with Android and iOS when choosing a React Native component, and try to choose components that are compatible with both Android and iOS platforms.

Image Adaptation

When developing an app, you need icons. Whether it is Android or iOS, there are more and more devices with different resolutions. We hope that these icons can adapt to devices with different resolutions. To this end, we need to provide three sizes of 1x, 2x, and 3x for each icon. React Native will dynamically choose to display pictures of different sizes according to the screen resolution. For example: in the img directory, there are the following three sizes of check.png

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

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

 <image source={require(&#39;. img= ""   check .png&#39;)} = "" ></image source={require(&#39;.>

Tip: When using icons with different resolutions, we must reference images with standard resolutions, such as require('./img/check.png'). If we write require('./img/[email protected]'), the application will only display the [email protected] image on devices with different resolutions, and the image self-adaptation effect cannot be achieved.

Performance issues

For most developers who want to develop applications with React Native, they are very concerned about the performance of React Native. The performance comparison between React Native and H5+WebView and native applications is: WebView

Tip: For operations with high performance requirements, such as multithreading, database operations, image processing, etc., if React Native components or APIs cannot meet the requirements, we can use native modules to achieve them.

For more information on how to develop React Native native modules, please refer to the real development of GitHub App React Native technology on both platforms.

Bugs

For React Native bugs, we can raise issues and pull requests. We can also pay attention to the version releases of React Native. Each version release will fix some bugs and add some new features and APIs.

The above are some of my experiences on adapting React Native to Android and iOS. If you encounter problems in adapting Android and iOS, you can leave a message below this article and I will reply in time after seeing it.