React Native 開發適配心得
期待已久的新課上線啦！解鎖React Native開發新姿勢，一網打盡React Native最新與最熱技術，點我Get!!!
眾所周知用React Native是可以開發跨平臺的Android和iOS App。我們可以用React Native開發Android應用也可以開發iOS應用，那麼如何讓我們開發的React Native應用適配Android和iOS雙平臺呢？
在這篇文章中我將從佈局、元件選擇、圖片、效能問題、Bugs等幾個方面來談一談Android和iOS的適配問題。
佈局
React Native在佈局方面採用的是Flexbox，為了能讓程式碼有更高複用性以及相容性，我們可以將Android和iOS的樣式儘量保持一致。
善用Platform.OS
為了提高程式碼的相容性，我們有時需要判斷當前系統的平臺，然後做一些適配。比如，我們在使用StatusBar做導航欄的時候，在iOS平臺下根檢視的位置預設情況下是佔據狀態列的位置的，我們通常希望狀態列下面能顯示一個導航欄，所以我們需要為StatusBar的外部容器設定一個高度：
<View style={{height: Platform.OS === 'ios' ? 20:0}}>
<StatusBar {...this.props.statusBar} />
</View>;
另外，在為檢視設定陰影的時候我們需要用到Shadow Props
elevation。
留意api doc的android或ios標識
並不是所有React Native的一些api或元件的一些屬性和方法都相容Android和iOS，在React Native的api doc中通常會在一些屬性或方法的前面加上android或ios的字樣來標識該屬性或方法所支援的平臺，如：
android renderToHardwareTextureAndroid bool
ios shouldRasterizeIOS bool
在上述程式碼中，renderToHardwareTextureAndroid bool
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
└── img
├── check.png
├── [email protected]2x.png
└── [email protected]3x.png
那麼我們就可以通過下面的方式來使用check.png：
<Image source={require('./img/check.png')} />
提示：我們在使用具有不同解析度的圖示時，一定要引用標準解析度的圖片如
require('./img/check.png')，如果我們這樣寫require('./img/[email protected]')，那麼應用在不同解析度的裝置上都只會顯示[email protected]圖片，也就無法達到圖片自適配的效果。
效能問題
對於大多數想用React Native開發應用的開發者來說，都很關心React Native的效能問題，React Native和H5+WebView以及原生應用之間的效能對比是：WebView<React Native<原生應用。從大多說採用React Native開發應用的開發者的反饋來看，React Native的效能是遠大於WebView但略低於原生應用，畢竟React Native和原生語言之間還需要一個Bridge。
提示：對效能要求較高的操作，比如：多執行緒、資料庫操作、圖片處理等，如果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中遇到問題可以在本文的下方進行留言，我看到了後會及時回覆的哦。
另外也可以關注我的新浪微博，或者關注我的Github來獲取更多有關React Native開發的技術乾貨。