【限时免费】岁尾最强一次云计算大年夜会，看传统、社区、互联网企业若何碰撞？

众所周知用React Native是可以开辟跨平台的Android和iOS App。我们可以用React Native开辟Android应用也可以开辟iOS应用，那么若何让我们开辟的React Native应用适配Android和iOS双平台呢?

在这篇文┞仿中我将大年夜构造、组件选择、图片、机能问题、Bugs等几个方面来谈一谈Android和iOS的适配问题。

构造

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平台的角度若何甄选这些组件呢?

所以如不雅我们要开辟的应用须要适配Android和iOS，那么Navigator擦?鲱佳的选择。

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

心得：为了进步代码的复竽暌姑性与兼容性建议大年夜家在选择React Native组件的时刻要多留心该组件是不是兼容Android和iOS，尽量选择Android和iOS平台都兼容的组件。

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

图片适配

开辟一款应用少不了的须要用到搁笔。无论是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组件或api无法知足需求的话，我们可以借助原生模块来实现。

机能问题

对于大年夜多半想用React Native开辟应用的开辟者来说，都很关怀React Native的机能问题，React Native和H5+WebView以及原生应用之间的机能比较是：WebView

　　推荐阅读

　　微信小程序小游戏大火，它现阶段还不适用于哪些场景？

无法代替直播类、物联网类、社交类、及时通信类和须要深度应用手机传感器的对象类应用微信如今已然是拥有9亿用户体量的超等app，推出的小法度榜样平台必定会带来很多用户流量。对于消息媒体类、商城类、>>>详细阅读

本文标题：如何开发一个适配Android和iOS双平台的React Native应用

地址：http://www.17bianji.com/lsqh/40186.html

 1/2    1