怎么開發一個適配Android和iOS雙平臺的React Native應用

這篇文章主要講解了“怎么開發一個適配Android和iOS雙平臺的React Native應用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么開發一個適配Android和iOS雙平臺的React Native應用”吧！

布局

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

善用Platform.OS

為了提高代碼的兼容性，我們有時需要判斷當前系統的平臺，然后做一些適配。比如，我們在使用StatusBar做導航欄的時候，在iOS平臺下根視圖的位置默認情況下是占據狀態欄的位置的，我們通常希望狀態欄下面能顯示一個導航欄，所以我們需要為StatusBar的外部容器設置一個高度：

<view style={{height: platform.os === &#39;ios&#39; ? 20:0}}>     <statusbar {...this.props.statusbar} > ;</statusbar {...this.props.statusbar} ></view style={{height: platform.os === &#39;ios&#39; ? 20:0}}>

源代碼

另外，在為視圖設置陰影的時候我們需要用到Shadow  Propsapi，而該api支持iOS平臺，在Android平臺下設置陰影我們需要用到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平臺，所有我們在使用這些帶有標記的屬性或方法的時候就需要考慮對于它們不兼容的平臺我們是否需要做相應的適配了。

組件選擇

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     ├── check@2x.png     └── check@3x.png

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

<image source={require(&#39;. img="" check.png&#39;)} =""></image source={require(&#39;.>

提示：我們在使用具有不同分辨率的圖標時，一定要引用標準分辨率的圖片如require('./img/check.png')，如果我們這樣寫require('./img/check@2x.png')，那么應用在不同分辨率的設備上都只會顯示check@2x.png圖片，也就無法達到圖片自適配的效果。

性能問題

對于大多數想用React Native開發應用的開發者來說，都很關心React Native的性能問題，React  Native和H5+WebView以及原生應用之間的性能對比是：WebView

提示：對性能要求較高的操作，比如：多線程、數據庫操作、圖片處理等，如果React  Native組件或api無法滿足需求的話，我們可以借助原生模塊來實現。

Bugs

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

感謝各位的閱讀，以上就是“怎么開發一個適配Android和iOS雙平臺的React Native應用”的內容了，經過本文的學習后，相信大家對怎么開發一個適配Android和iOS雙平臺的React Native應用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！