這篇文章主要講解了“怎么開發(fā)一個(gè)適配Android和iOS雙平臺(tái)的React Native應(yīng)用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么開發(fā)一個(gè)適配Android和iOS雙平臺(tái)的React Native應(yīng)用”吧！

創(chuàng)新互聯(lián)建站于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元西秀做網(wǎng)站,已為上家服務(wù),為西秀各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

布局

React Native在布局方面采用的是Flexbox，為了能讓代碼有更高復(fù)用性以及兼容性，我們可以將Android和iOS的樣式盡量保持一致。

善用Platform.OS

為了提高代碼的兼容性，我們有時(shí)需要判斷當(dāng)前系統(tǒng)的平臺(tái)，然后做一些適配。比如，我們?cè)谑褂肧tatusBar做導(dǎo)航欄的時(shí)候，在iOS平臺(tái)下根視圖的位置默認(rèn)情況下是占據(jù)狀態(tài)欄的位置的，我們通常希望狀態(tài)欄下面能顯示一個(gè)導(dǎo)航欄，所以我們需要為StatusBar的外部容器設(shè)置一個(gè)高度：

      ;

源代碼

另外，在為視圖設(shè)置陰影的時(shí)候我們需要用到Shadow  Propsapi，而該api支持iOS平臺(tái)，在Android平臺(tái)下設(shè)置陰影我們需要用到elevation。

留意api doc的android或ios標(biāo)識(shí)

并不是所有React Native的一些api或組件的一些屬性和方法都兼容Android和iOS，在React Native的api  doc中通常會(huì)在一些屬性或方法的前面加上android或ios的字樣來(lái)標(biāo)識(shí)該屬性或方法所支持的平臺(tái)，如：

android renderToHardwareTextureAndroid bool ios shouldRasterizeIOS bool

在上述代碼中，renderToHardwareTextureAndroid bool只支持Android平臺(tái)，ios shouldRasterizeIOS  bool只支持iOS平臺(tái)，所有我們?cè)谑褂眠@些帶有標(biāo)記的屬性或方法的時(shí)候就需要考慮對(duì)于它們不兼容的平臺(tái)我們是否需要做相應(yīng)的適配了。

組件選擇

React Native發(fā)展到現(xiàn)在已經(jīng)有相當(dāng)豐富的組件來(lái)供開發(fā)者使用，那么從適配Android和iOS平臺(tái)的角度如何甄選這些組件呢?

比如，我們要開發(fā)一款應(yīng)用需要用到導(dǎo)航組件，在React Native組件中有NavigatorIOS與Navigator兩個(gè)導(dǎo)航組件來(lái)供我們選擇，從api  doc中我們可以看出NavigatorIOS只支持iOS平臺(tái)，Navigator則兩個(gè)平臺(tái)都支持。

所以如果我們要開發(fā)的應(yīng)用需要適配Android和iOS，那么Navigator才是***的選擇。

另外，類似的例子還有底部導(dǎo)航的TabBarIOS、ToolbarAndroid等。

心得：為了提高代碼的復(fù)用性與兼容性建議大家在選擇React  Native組件的時(shí)候要多留意該組件是不是兼容Android和iOS，盡量選擇Android和iOS平臺(tái)都兼容的組件。

圖片適配

開發(fā)一款應(yīng)用少不了的需要用到圖標(biāo)。無(wú)論是Android還是iOS，現(xiàn)在不同分辨率的設(shè)備越來(lái)越多，我們希望這些圖標(biāo)能夠適配不同分辨率的設(shè)備。為此我們需要為每個(gè)圖標(biāo)提供1x、2x、3x三種大小的尺寸，React  Native會(huì)根據(jù)屏幕的分辨率來(lái)動(dòng)態(tài)的選擇顯示不同尺寸的圖片。比如：在img目錄下有如下三種尺寸的check.png

└── img     ├── check.png     ├── check@2x.png     └── check@3x.png

那么我們就可以通過下面的方式來(lái)使用check.png：

提示：我們?cè)谑褂镁哂胁煌直媛实膱D標(biāo)時(shí)，一定要引用標(biāo)準(zhǔn)分辨率的圖片如require('./img/check.png')，如果我們這樣寫require('./img/check@2x.png')，那么應(yīng)用在不同分辨率的設(shè)備上都只會(huì)顯示check@2x.png圖片，也就無(wú)法達(dá)到圖片自適配的效果。

性能問題

對(duì)于大多數(shù)想用React Native開發(fā)應(yīng)用的開發(fā)者來(lái)說，都很關(guān)心React Native的性能問題，React  Native和H5+WebView以及原生應(yīng)用之間的性能對(duì)比是：WebView

提示：對(duì)性能要求較高的操作，比如：多線程、數(shù)據(jù)庫(kù)操作、圖片處理等，如果React  Native組件或api無(wú)法滿足需求的話，我們可以借助原生模塊來(lái)實(shí)現(xiàn)。

Bugs

對(duì)于React Native的Bug我們可以提Issue與Pull Request，另外也可以關(guān)注React  Native的版本發(fā)布releases，每次版本發(fā)布都會(huì)修復(fù)一些Bug，以及添加一些新的功能與api。

感謝各位的閱讀，以上就是“怎么開發(fā)一個(gè)適配Android和iOS雙平臺(tái)的React Native應(yīng)用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么開發(fā)一個(gè)適配Android和iOS雙平臺(tái)的React Native應(yīng)用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！