如何开发一个适配Android和iOS双平台的React Native应用(android react native混合开发 组件化)

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

如何开发一个适配Android和iOS双平台的React Native应用(android react native混合开发 组件化)

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

布局

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

善用Platform.OS

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

  1. <view style={{height: platform.os === \’ios\’ ? 20:0}}>
  2. <statusbar {…this.props.statusbar} >
  3. ;</statusbar {…this.props.statusbar} ></view style={{height: platform.os === \’ios\’ ? 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(\’. img=\”\” check.png\’)} =\”\”></image source={require(\’.>

提示:我们在使用具有不同分辨率的图标时,一定要引用标准分辨率的图片如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。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月19日 下午11:34
下一篇 2024年5月19日 下午11:46

相关推荐

  • 持续加强过渡期产业项目监督检查保障项目清廉群众受益

    中央纪委国家监委网站 李张光 近日,重庆市涪陵区纪委监委干部在对乡村振兴重点产业项目推进情况监督检查时发现,大顺镇新兴村林下灵芝种植基地因连日干旱,灌溉问题迟迟没得到有效解决,影响…

    科研百科 2022年7月17日
    281
  • 技术基础科研项目任务书

    技术基础科研项目任务书 一、项目背景 随着信息技术的飞速发展,计算机硬件和软件的不断升级,传统的技术基础学科也面临着越来越严峻的挑战。为了更好地应对这一挑战,我们计划开展一项技术基…

    科研百科 2025年4月29日
    1
  • 中医学硕士研究生就业方向?一般是🏥,专科教书,研发等

    大家好,我是热爱中医的小丹。今天这期视频讲一下中医学硕士就业的一些情况。因为前几天参加我们学校的校招,和我的一些同学交流之后,我发现其实现在工作是很难找的。因为大家都知道医学生硕士…

    科研百科 2024年4月14日
    662
  • 协同办公登录首页(湖北协同办公)

    湖北协同办公:疫情下的挑战与机遇 自2020年初爆发以来,新冠疫情对全球经济造成了巨大的冲击,而湖北作为中国中部的省份,也受到了很大的影响。在这个背景下,湖北协同办公的需求急剧增加…

    科研百科 2024年6月4日
    80
  • 道路排水工程施工组织设计(道路排水工程施工组织设计规范)

    目 录 第一章 编制依据及原则 1.1编制的依据 1.2 编制的原则 1.3工期要求 第二章 工程概况 2.1项目简介 2.1.1雨水管道 2.1.2污水管道 2.1.3道路恢复路…

    科研百科 2022年9月16日
    221
  • 科研项目走账流程

    科研项目走账流程 在科研项目中,走账流程是非常重要的一环,它关系到科研项目的资金是否能够及时到位,以及科研项目的进度和质量。本文将介绍科研项目走账流程的一般步骤和注意事项。 一、立…

    科研百科 2025年3月7日
    0
  • 商科科研项目的价格

    商科科研项目的价格: 一个真实的商业故事 商科科研项目的价格是一个令人困惑的问题。许多人认为商科科研项目的价格很高,但实际上,这些项目可以带来巨大的商业机会和回报。本文将分享一个真…

    科研百科 2025年2月26日
    1
  • 财防18号文 国防科研 pdf

    国防科研是一项非常重要的任务,它涉及到国家安全和社会稳定。随着军事现代化和国防建设的不断推进,国防科研的重要性也越来越凸显。因此,如何保障国防科研的顺利进行,已经成为政府和军队需要…

    科研百科 2024年10月31日
    39
  • 最新招聘,215人!(公开招聘54人)

    2022年已过半 需要找工作的小伙伴们注意啦!! 今天,小新为大家带来超多岗位 快来看看 招聘专业技术人员211名 根据苏州高新区医疗卫生机构工作需要, 现面向社会公开招聘专业技术…

    科研百科 2022年7月7日
    260
  • 高级定制or私人订制,傻傻分不清楚?(私人定制和高级定制)

    生活中是否听过这样的词汇 高级定制、私人订制、高级成衣定制 都加上了定制的后缀 简直让人傻傻分不清 今天我们就来聊聊 他们到底有什么区别 高级定制服是时尚的标尺,高级定制服源于巴黎…

    科研百科 2022年8月9日
    768