众所周知，ReactNative可以用来开发跨平台的Android和iOS应用。我们可以使用ReactNative来开发Android应用和iOS应用，那么如何让我们开发的ReactNative应用同时适配Android和iOS平台呢？在这篇文章中，我将从布局、组件选择、图片、性能问题、Bugs等方面入手，谈谈Android和iOS的适配。布局ReactNative在布局方面使用了Flexbox。为了让代码的复用性和兼容性更好，我们可以让Android和iOS的风格尽量保持一致。善用Platform.OS为了提高代码的兼容性，我们有时需要判断当前系统的平台，然后做一些适配。例如，当我们使用StatusBar作为导航栏时，在iOS平台上根视图的位置默认占据了状态栏的位置。我们通常希望状态栏下面可以显示一个导航栏，所以我们需要为StatusBar的外部提供状态栏。为容器设置高度：;源码另外，在给view设置阴影的时候，有时候我们需要用到ShadowPropsapi，而这个api是支持iOS平台的，Android平台下我们需要使用elevation来设置阴影。注意apidoc的android或ios标识。ReactNative的某些API或组件的所有属性和方法并非都与Android和iOS兼容。在ReactNative的api文档中，通常会在一些属性或方法前加上android或ios等字样来标识该属性或方法支持的平台，如：androidrenderToHardwareTextureAndroidbooliosshouldRasterizeIOSbool上面代码中，renderToHardwareTextureAndroidbool只支持Android平台,iosshouldRasterizeIOSbool只支持iOS平台，所以我们在使用这些标记的属性或者方法的时候需要考虑是否需要针对它们不兼容的平台做相应的适配。组件选择ReactNative已经开发了相当多的组件供开发者使用，那么如何从适配Android和iOS平台的角度来选择这些组件呢？例如，我们需要使用导航组件来开发一个应用程序。ReactNative组件有两个导航组件，NavigatorIOS和Navigator，供我们选择。从apidoc可以看出，NavigatorIOS只支持iOS平台，而Navigator支持两个平台。所以如果我们要开发的应用需要适配Android和iOS，那么Navigator是不二之选。此外，类似的例子还有用于底部导航的TabBarIOS和ToolbarAndroid。心得：为了提高代码的复用性和兼容性，建议大家在选择ReactNative组件时多关注组件是否兼容Android和iOS，尽量选择两者都兼容的组件Android和iOS平台。图像适配图标对于开发应用程序是必不可少的。无论是Android还是iOS，不同分辨率的设备越来越多，我们希望这些图标能够适配不同分辨率的设备。为此，我们需要为每个图标提供1x、2x、3x三种尺寸，ReactNative会根据屏幕的分辨率动态选择显示不同尺寸的图片。例如：在img目录下，有以下三种尺寸的check.png└──img├──check.png├──check@2x.png└──check@3x.png那么我们就可以使用下面的check.png的使用方法：分辨率，一定要引用require('./img/check.png')等标准分辨率的图片，如果我们这样写require('./img/check@2x.png')，那么应用只会在不同分辨率的设备上显示check@2x.png图片，无法达到图片自适应的效果性能问题是大多数想使用ReactNative开发应用的开发者非常关心的问题ReactNative的性能问题，ReactNative和H5+WebView与原生应用的性能对比是：如果api不能满足需求，我们可以使用原生模块来实现，关于如何开发ReactNative原生模块，可以参考双平台实战开发GitHubAppReactNative技术完全掌握。Bugs对于ReactNative的Bug，我们可以提交Issues和PullRequests。另外，你也可以关注ReactNative的发布。每个版本都会修复一些错误并添加一些新功能和API。以上是我对ReactNative适配Android和iOS的一些思考。如果你在配置Android和iOS的过程中遇到问题，可以在本文底部留言，我看到后会及时回复。
