建站
咨詢
售后
建站咨詢
新聞中心
眾所周知用React Native是可以開發(fā)跨平臺的Android和iOS App。我們可以用React Native開發(fā)Android應(yīng)用也可以開發(fā)iOS應(yīng)用，那么如何讓我們開發(fā)的React Native應(yīng)用適配Android和iOS雙平臺呢?
在這篇文章中我將從布局、組件選擇、圖片、性能問題、Bugs等幾個(gè)方面來談一談Android和iOS的適配問題。
布局
React Native在布局方面采用的是Flexbox，為了能讓代碼有更高復(fù)用性以及兼容性，我們可以將Android和iOS的樣式盡量保持一致。
善用Platform.OS
為了提高代碼的兼容性，我們有時(shí)需要判斷當(dāng)前系統(tǒng)的平臺，然后做一些適配。比如，我們在使用StatusBar做導(dǎo)航欄的時(shí)候，在iOS平臺下根視圖的位置默認(rèn)情況下是占據(jù)狀態(tài)欄的位置的，我們通常希望狀態(tài)欄下面能顯示一個(gè)導(dǎo)航欄，所以我們需要為StatusBar的外部容器設(shè)置一個(gè)高度：
- ;
源代碼
另外，在為視圖設(shè)置陰影的時(shí)候我們需要用到Shadow Propsapi，而該api支持iOS平臺，在Android平臺下設(shè)置陰影我們需要用到elevation。
留意api doc的android或ios標(biāo)識
并不是所有React Native的一些api或組件的一些屬性和方法都兼容Android和iOS，在React Native的api doc中通常會在一些屬性或方法的前面加上android或ios的字樣來標(biāo)識該屬性或方法所支持的平臺，如：
- android renderToHardwareTextureAndroid bool
- ios shouldRasterizeIOS bool
在上述代碼中，renderToHardwareTextureAndroid bool只支持Android平臺，ios shouldRasterizeIOS bool只支持iOS平臺，所有我們在使用這些帶有標(biāo)記的屬性或方法的時(shí)候就需要考慮對于它們不兼容的平臺我們是否需要做相應(yīng)的適配了。
組件選擇
React Native發(fā)展到現(xiàn)在已經(jīng)有相當(dāng)豐富的組件來供開發(fā)者使用，那么從適配Android和iOS平臺的角度如何甄選這些組件呢?
比如，我們要開發(fā)一款應(yīng)用需要用到導(dǎo)航組件，在React Native組件中有NavigatorIOS與Navigator兩個(gè)導(dǎo)航組件來供我們選擇，從api doc中我們可以看出NavigatorIOS只支持iOS平臺，Navigator則兩個(gè)平臺都支持。
所以如果我們要開發(fā)的應(yīng)用需要適配Android和iOS，那么Navigator才是***的選擇。
另外，類似的例子還有底部導(dǎo)航的TabBarIOS、ToolbarAndroid等。
心得：為了提高代碼的復(fù)用性與兼容性建議大家在選擇React Native組件的時(shí)候要多留意該組件是不是兼容Android和iOS，盡量選擇Android和iOS平臺都兼容的組件。
圖片適配
開發(fā)一款應(yīng)用少不了的需要用到圖標(biāo)。無論是Android還是iOS，現(xiàn)在不同分辨率的設(shè)備越來越多，我們希望這些圖標(biāo)能夠適配不同分辨率的設(shè)備。為此我們需要為每個(gè)圖標(biāo)提供1x、2x、3x三種大小的尺寸，React Native會根據(jù)屏幕的分辨率來動態(tài)的選擇顯示不同尺寸的圖片。比如：在img目錄下有如下三種尺寸的check.png
- └── img
- ├── check.png
- ├── check@2x.png
- └── check@3x.png
那么我們就可以通過下面的方式來使用check.png：
提示：我們在使用具有不同分辨率的圖標(biāo)時(shí)，一定要引用標(biāo)準(zhǔn)分辨率的圖片如require('./img/check.png')，如果我們這樣寫require('./img/check@2x.png')，那么應(yīng)用在不同分辨率的設(shè)備上都只會顯示check@2x.png圖片，也就無法達(dá)到圖片自適配的效果。
性能問題
對于大多數(shù)想用React Native開發(fā)應(yīng)用的開發(fā)者來說，都很關(guān)心React Native的性能問題，React Native和H5+WebView以及原生應(yīng)用之間的性能對比是：WebView
提示：對性能要求較高的操作，比如：多線程、數(shù)據(jù)庫操作、圖片處理等，如果React Native組件或api無法滿足需求的話，我們可以借助原生模塊來實(shí)現(xiàn)。
關(guān)于如何開發(fā)React Native原生模塊大家可以參看雙平臺真實(shí)開發(fā)GitHub App React Native技術(shù)全面掌握。
Bugs
對于React Native的Bug我們可以提Issue與Pull Request，另外也可以關(guān)注React Native的版本發(fā)布releases，每次版本發(fā)布都會修復(fù)一些Bug，以及添加一些新的功能與api。
以上便是我對于React Native適配Android和iOS上的一些心得，如果大家在適配Android和iOS中遇到問題可以在本文的下方進(jìn)行留言，我看到了后會及時(shí)回復(fù)的哦。
分享文章：如何開發(fā)一個(gè)適配Android和iOS雙平臺的ReactNative應(yīng)用
分享網(wǎng)址：http://www.dlmjj.cn/article/cdopcdg.html
