如何开发适配安卓和iOS双平台的React Native应用

众所周知用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=>
    <StatusBar {...this.props.statusBar} /> </View>;

源代码

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

留意api doc的android或ios标识

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

android renderToHardwareTextureAndroid boolios shouldRasterizeIOS bool

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

组件选择

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

比如,我们要开发一款应用需要用到导航组件,在React Native组件中有NavigatorIOSNavigator两个导航组件来供我们选择,从api doc中我们可以看出NavigatorIOS只支持iOS平台,Navigator则两个平台都支持。 所以如果我们要开发的应用需要适配Android和iOS,那么Navigator才是最佳的选择。

另外,类似的例子还有底部导航的TabBarIOSToolbarAndroid 等。

心得:为了提高代码的复用性与兼容性建议大家在选择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('./img/check.png')} />

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

性能问题

对于大多数想用React Native开发应用的开发者来说,都很关心React Native的性能问题,React Native和H5+WebView以及原生应用之间的性能对比是:WebView<React Native<原生应用。从大多说采用React Native开发应用的开发者的反馈来看,React Native的性能是远大于WebView但略低于原生应用,毕竟React Native和原生语言之间还需要一个Bridge。

原文发布于微信公众号 - 编程坑太多(idig88)

原文发表时间:2018-03-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏君赏技术博客

AutoLayout简洁之道

1.是IOS8新出的,属于表格一样的布局,我们暂时不用多管。 2.是进行两个试图进行约束的 3.是对于单个试图进行约束的,默认相对于父试图。 4.是对于约...

10720
来自专栏互联网杂技

orimuse作品上传_线框图

<script> window.onload=function(){ var cloth_name={ //衣服的款式图片 man:{ white_f...

35150
来自专栏彭湖湾的编程世界

【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: ? 也可能是多行的: ? ...

35380
来自专栏前端萌媛的成长之路

CSS常见布局

20220
来自专栏IMWeb前端团队

jQuery选择器总结

本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载 不得不说,jq是写代码是替代js的一种超级棒的选择。对于刚入门的小白都...

23550
来自专栏腾讯IVWEB团队的专栏

为元素添加边框,你有多少种好办法?

相信大家在做项目的过程中会经常遇到这样的一个需求,鼠标 hover 到某个元素的时候为这个元素添加边框,这个简单的需求仅需注意添加边框后不会对原有的位置造成布局...

18700
来自专栏marsggbo

这是对position讲解最通俗易懂的版本了。

position 为了制作更多复杂的布局,我们需要讨论下 position 属性。它有一大堆的值,名字还都特抽象,别提有多难记了。让我们先一个个的过一遍,不过你...

26760
来自专栏IMWeb前端团队

H5活动宣传页通用布局技术解决方案

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是...

23550
来自专栏腾讯社交用户体验设计

实现下划线的N个姿势

21140
来自专栏夏时

纯 CSS 实现漂亮的大标题效果

20320

扫码关注云+社区

领取腾讯云代金券