期待已久的新課上線啦谍咆！解鎖React Native開發(fā)新姿勢，一網(wǎng)打盡React Native最新與最熱技術(shù)宣吱，點我Get!!!
眾所周知用React Native是可以開發(fā)跨平臺的Android和iOS App咬像。我們可以用React Native開發(fā)Android應(yīng)用也可以開發(fā)iOS應(yīng)用烘浦，那么如何讓我們開發(fā)的React Native應(yīng)用適配Android和iOS雙平臺呢吮旅？
在這篇文章中我將從布局溪烤、組件選擇、圖片庇勃、性能問題檬嘀、Bugs等幾個方面來談一談Android和iOS的適配問題。
布局
React Native在布局方面采用的是Flexbox责嚷，為了能讓代碼有更高復(fù)用性以及兼容性鸳兽，我們可以將Android和iOS的樣式盡量保持一致。
善用Platform.OS
為了提高代碼的兼容性罕拂，我們有時需要判斷當前系統(tǒng)的平臺揍异，然后做一些適配。比如聂受，我們在使用StatusBar做導(dǎo)航欄的時候蒿秦，在iOS平臺下根視圖的位置默認情況下是占據(jù)狀態(tài)欄的位置的烤镐，我們通常希望狀態(tài)欄下面能顯示一個導(dǎo)航欄蛋济，所以我們需要為StatusBar的外部容器設(shè)置一個高度：
<View style={{height: Platform.OS === 'ios' ? 20:0}}>
<StatusBar {...this.props.statusBar} />
</View>;
另外，在為視圖設(shè)置陰影的時候我們需要用到Shadow Propsapi炮叶，而該api支持iOS平臺碗旅，在Android平臺下設(shè)置陰影我們需要用到elevation渡处。
留意api doc的android或ios標識
并不是所有React Native的一些api或組件的一些屬性和方法都兼容Android和iOS，在React Native的api doc中通常會在一些屬性或方法的前面加上android或ios的字樣來標識該屬性或方法所支持的平臺祟辟，如：
android renderToHardwareTextureAndroid bool
ios shouldRasterizeIOS bool
在上述代碼中医瘫，renderToHardwareTextureAndroid bool只支持Android平臺，ios shouldRasterizeIOS bool只支持iOS平臺旧困，所有我們在使用這些帶有標記的屬性或方法的時候就需要考慮對于它們不兼容的平臺我們是否需要做相應(yīng)的適配了醇份。
組件選擇
React Native發(fā)展到現(xiàn)在已經(jīng)有相當豐富的組件來供開發(fā)者使用，那么從適配Android和iOS平臺的角度如何甄選這些組件呢吼具？
比如僚纷，我們要開發(fā)一款應(yīng)用需要用到導(dǎo)航組件，在React Native組件中有NavigatorIOS與Navigator兩個導(dǎo)航組件來供我們選擇拗盒，從api doc中我們可以看出NavigatorIOS只支持iOS平臺怖竭，Navigator則兩個平臺都支持。
所以如果我們要開發(fā)的應(yīng)用需要適配Android和iOS陡蝇，那么Navigator才是最佳的選擇痊臭。
另外，類似的例子還有底部導(dǎo)航的TabBarIOS登夫、ToolbarAndroid等广匙。
心得：為了提高代碼的復(fù)用性與兼容性建議大家在選擇React Native組件的時候要多留意該組件是不是兼容Android和iOS，盡量選擇Android和iOS平臺都兼容的組件恼策。
圖片適配
開發(fā)一款應(yīng)用少不了的需要用到圖標艇潭。無論是Android還是iOS，現(xiàn)在不同分辨率的設(shè)備越來越多戏蔑，我們希望這些圖標能夠適配不同分辨率的設(shè)備蹋凝。為此我們需要為每個圖標提供1x、2x总棵、3x三種大小的尺寸鳍寂，React Native會根據(jù)屏幕的分辨率來動態(tài)的選擇顯示不同尺寸的圖片。比如：在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')，那么應(yīng)用在不同分辨率的設(shè)備上都只會顯示check@2x.png圖片骤视，也就無法達到圖片自適配的效果鞍爱。
性能問題
對于大多數(shù)想用React Native開發(fā)應(yīng)用的開發(fā)者來說，都很關(guān)心React Native的性能問題专酗，React Native和H5+WebView以及原生應(yīng)用之間的性能對比是：WebView<React Native<原生應(yīng)用睹逃。從大多說采用React Native開發(fā)應(yīng)用的開發(fā)者的反饋來看，React Native的性能是遠大于WebView但略低于原生應(yīng)用，畢竟React Native和原生語言之間還需要一個Bridge沉填。
提示：對性能要求較高的操作疗隶，比如：多線程、數(shù)據(jù)庫操作翼闹、圖片處理等斑鼻，如果React Native組件或api無法滿足需求的話，我們可以借助原生模塊來實現(xiàn)猎荠。
關(guān)于如何開發(fā)React Native原生模塊大家可以參看雙平臺真實開發(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中遇到問題可以在本文的下方進行留言停撞，我看到了后會及時回復(fù)的哦。
另外也可以關(guān)注我的新浪微博悼瓮，或者關(guān)注我的Github來獲取更多有關(guān)React Native開發(fā)的技術(shù)干貨戈毒。
