Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to develop a React Native application that adapts to the dual platforms of Android and iOS". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to develop a React Native application that adapts to the dual platforms of Android and iOS".

Overall Arrangement

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

Make good use of Platform.OS

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

source code

In addition, we need to use Shadow Propsapi when setting shadows for views, and this api supports the iOS platform, and we need to use elevation to set shadows on the Android platform.

Pay attention to the android or ios logo of api doc

Not all properties and methods of some api or components of React Native are compatible with Android and iOS. In the api doc of React Native, the words android or ios are usually added before some properties or methods to identify the platform supported by the attribute or method, such as:

Android renderToHardwareTextureAndroid bool ios shouldRasterizeIOS bool

In the above code, renderToHardwareTextureAndroid bool only supports Android platform, ios shouldRasterizeIOS bool only supports iOS platform, so when we use these tagged attributes or methods, we need to consider whether we need to adapt to their incompatible platforms.

Component selection

React Native now has a wealth of components for developers to use, so how to select these components from the point of view of adapting to Android and iOS platforms?

For example, we need navigation components to develop an application. There are two navigation components, NavigatorIOS and Navigator, in the React Native component. From api doc, we can see that NavigatorIOS only supports the iOS platform, while Navigator supports both platforms.

So if the application we are developing needs to adapt to Android and iOS, then Navigator is the choice.

In addition, there are similar examples of bottom navigation TabBarIOS, ToolbarAndroid, and so on.

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

Picture adaptation

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

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

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

Tip: when we use icons with different resolutions, be sure to reference standard resolution images such as require ('. / img/check.png'). If we write require ('. / img/check@2x.png') in this way, then the application on devices with different resolutions will only display check@2x.png images, which will not achieve the effect of picture self-adaptation.

Performance problem

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 that require high performance, such as multithreading, database operations, image processing, etc., if React Native components or api cannot meet the requirements, we can use native modules to achieve them.

Bugs

For the Bug of React Native, we can mention Issue and Pull Request, and we can also follow the release releases of React Native. Each release will fix some Bug and add some new features and api.

Thank you for your reading, the above is the content of "how to develop a React Native application that adapts to the dual platforms of Android and iOS". After the study of this article, I believe you have a deeper understanding of how to develop a React Native application that adapts to the dual platforms of Android and iOS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.