怎么开发一个适配Android和iOS双平台的React Native应用

这篇文章主要讲解了“怎么开发一个适配Android和iOS双平台的React Native应用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么开发一个适配Android和iOS双平台的React Native应用”吧！

布局

React Native在布局方面采用的是Flexbox，为了能让代码有更高复用性以及兼容性，我们可以将Android和iOS的样式尽量保持一致。

善用Platform.OS

为了提高代码的兼容性，我们有时需要判断当前系统的平台，然后做一些适配。比如，我们在使用StatusBar做导航栏的时候，在iOS平台下根视图的位置默认情况下是占据状态栏的位置的，我们通常希望状态栏下面能显示一个导航栏，所以我们需要为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}}>

源代码

另外，在为视图设置阴影的时候我们需要用到Shadow  Propsapi，而该api支持iOS平台，在Android平台下设置阴影我们需要用到elevation。

留意api doc的android或ios标识

并不是所有React Native的一些api或组件的一些属性和方法都兼容Android和iOS，在React Native的api  doc中通常会在一些属性或方法的前面加上android或ios的字样来标识该属性或方法所支持的平台，如：

android renderToHardwareTextureAndroid bool ios shouldRasterizeIOS bool

在上述代码中，renderToHardwareTextureAndroid bool只支持Android平台，ios shouldRasterizeIOS  bool只支持iOS平台，所有我们在使用这些带有标记的属性或方法的时候就需要考虑对于它们不兼容的平台我们是否需要做相应的适配了。

组件选择

React Native发展到现在已经有相当丰富的组件来供开发者使用，那么从适配Android和iOS平台的角度如何甄选这些组件呢?

比如，我们要开发一款应用需要用到导航组件，在React Native组件中有NavigatorIOS与Navigator两个导航组件来供我们选择，从api  doc中我们可以看出NavigatorIOS只支持iOS平台，Navigator则两个平台都支持。

所以如果我们要开发的应用需要适配Android和iOS，那么Navigator才是***的选择。

另外，类似的例子还有底部导航的TabBarIOS、ToolbarAndroid等。

心得：为了提高代码的复用性与兼容性建议大家在选择React  Native组件的时候要多留意该组件是不是兼容Android和iOS，尽量选择Android和iOS平台都兼容的组件。

图片适配

开发一款应用少不了的需要用到图标。无论是Android还是iOS，现在不同分辨率的设备越来越多，我们希望这些图标能够适配不同分辨率的设备。为此我们需要为每个图标提供1x、2x、3x三种大小的尺寸，React  Native会根据屏幕的分辨率来动态的选择显示不同尺寸的图片。比如：在img目录下有如下三种尺寸的check.png

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

那么我们就可以通过下面的方式来使用check.png：

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

提示：我们在使用具有不同分辨率的图标时，一定要引用标准分辨率的图片如require('./img/check.png')，如果我们这样写require('./img/check@2x.png')，那么应用在不同分辨率的设备上都只会显示check@2x.png图片，也就无法达到图片自适配的效果。

性能问题

对于大多数想用React Native开发应用的开发者来说，都很关心React Native的性能问题，React  Native和H5+WebView以及原生应用之间的性能对比是：WebView

提示：对性能要求较高的操作，比如：多线程、数据库操作、图片处理等，如果React  Native组件或api无法满足需求的话，我们可以借助原生模块来实现。

Bugs

对于React Native的Bug我们可以提Issue与Pull Request，另外也可以关注React  Native的版本发布releases，每次版本发布都会修复一些Bug，以及添加一些新的功能与api。

感谢各位的阅读，以上就是“怎么开发一个适配Android和iOS双平台的React Native应用”的内容了，经过本文的学习后，相信大家对怎么开发一个适配Android和iOS双平台的React Native应用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！