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

转载 2018年01月04日 00:00:00

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

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1

在这篇文章中我将从布局、组件选择、图片、性能问题、Bugs等几个方面来谈一谈Android和iOS的适配问题。

布局

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

善用Platform.OS

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

  1. <view style={{height: platform.os === &#39;ios&#39; ? 20:0}}> 

  2.     <statusbar {...this.props.statusbar} > 

  3. ;</statusbar {...this.props.statusbar} ></view style={{height: platform.os === &#39;ios&#39; ? 20:0}}> 

源代码https://github.com/crazycodeboy/GitHubPopular/blob/master/js/common/NavigationBar.js

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

留意api doc的android或ios标识

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

  1. android renderToHardwareTextureAndroid bool 

  2. 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

  1. └── img 

  2.     ├── check.png 

  3.     ├── check@2x.png 

  4.     └── check@3x.png 

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

  1. <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无法满足需求的话,我们可以借助原生模块来实现。

关于如何开发React Native原生模块大家可以参看双平台真实开发GitHub App React Native技术全面掌握。

Bugs

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

以上便是我对于React Native适配Android和iOS上的一些心得,如果大家在适配Android和iOS中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。

0?wx_fmt=jpeg


那些iOS和Android跨平台解决方案

发布于:2013-05-28 13:26阅读数:302 不少开发者有意进行跨平台应用开发,但“工欲善其事必先其器”,本文整理了一些iOS和Android跨平台解决方案,欢迎补充。 “” ...
  • billfanggs
  • billfanggs
  • 2013年05月28日 14:35
  • 1855

iOS和Android跨平台移动应用开发解决方案

Corona SDK(使用Lua语言)   Corona SDK的优点: 稳定;支持硬件加速、GPS、指南针及照相机等;支持与Map、Facebook、OpenFien...
  • avsuper
  • avsuper
  • 2013年09月27日 16:50
  • 10121

手把手教你快速学会双平台真实开发GitHub App React Native技术全面掌握

双平台真实开发GitHub App  React Native技术全面掌握 课程简介': 24个小时手把手带你用RN开发并上线一款Android,IOS双平台APP,并全面掌握RN开发常用...
  • sinat_40731586
  • sinat_40731586
  • 2017年10月28日 22:34
  • 186

React Native多平台适配-Android ios h5 Web

>  Facebook 2015年开源了这个项目-React Native,可以到GitHub可以看到。 >  React Native实践之携程Moles框架: http://geek.csdn.n...
  • ShareUs
  • ShareUs
  • 2016年06月26日 20:47
  • 1135

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

众所周知用React Native是可以开发跨平台的Android和iOS App。我们可以用React Native开发Android应用也可以开发iOS应用,那么如何让我们开发的React Nat...
  • c6E5UlI1N
  • c6E5UlI1N
  • 2018年01月04日 00:00
  • 892

Unity 使用C/C++ 跨平台终极解决方案(PC,iOS,Android,以及支持C/C++的平台)

PC的其实根本不用说,毕竟C#和C++交互的文章已经够多了,当然我自认为经过几次折腾后,几乎所有游戏需要到的操作我都掌握了(各种传参方法,各种坑,不懂的可以留言问,虽然基本上没人看,哈哈) ...
  • fg5823820
  • fg5823820
  • 2015年08月22日 23:19
  • 13790

ReactNative开发双平台APP

入门知识 写给移动开发者的 React Native 指南 http://www.jianshu.com/p/b88944250b25
  • Amen_Wu
  • Amen_Wu
  • 2017年10月26日 13:19
  • 113

基于React-Native的高仿「ONE·一个」,兼容Android、iOS双平台

https://github.com/lipeiwei-szu/ReactNativeOne 该APP所用到的API均由 「ONE · 一个」提供,本人采取非正常手段获取。获取跟共享的行为或...
  • sinat_17775997
  • sinat_17775997
  • 2017年02月13日 22:43
  • 510

跨平台APP----对Native/Hybrid/Web APP三种开发模式的分析(系列一)

前言: 跨平台APP开发是以后的一个趋势,将会有更多的工具出现。原生开发人员无论是薪资还是人数都将出现一定的下降。 --------谷震平 【以下内容均为原创,请尊重原创!】 一 Native/Hyb...
  • guzhenping
  • guzhenping
  • 2016年01月11日 14:31
  • 12504

App跨平台开发方案与取舍

App跨平台开发方案与抉择 内心强大才敢于承认错误,但是首先你要敢于去试错。 现在做客户端开发的公司都会面临一个巨大的问题,那么就是跨平台。对于目前上市面上的移动设备来说。An...
  • jingwen3699
  • jingwen3699
  • 2017年03月31日 11:10
  • 3279
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何开发一个适配Android和iOS双平台的React Native应用
举报原因:
原因补充:

(最多只允许输入30个字)