前言

我們在實際專案開發中，Android和IOS平臺顯示的效果可能並不相同，針對不同平臺編寫不同程式碼的需求, 下面舉例說明React-Native工程下幾種平臺區分的方法，以供參考。

用不同資料夾區分

建立不同的資料夾，存放不同平臺的程式碼，是很常見的一種方式，大概如下：

/common/components/   
/android/components/   
/ios/components/

ios資料夾存放ios的元件，android資料夾存放android元件，common存放通用的元件。

用不同檔名字區分

這個比較簡單，只需要區分檔案即可：

ButtonIOS.js
ButtonAndroid.js
 

此種形式不是很推薦。

拓展名區分平臺

針對不同平臺使用拓展名字用以區分，此種形式是React Native特有的一種方式。只要使用特定的拓展名，就會被RN框架進行區分識別。比如：

Button.ios.js
Button.android.js

這樣命名元件後你就可以在其他元件中直接引用，而無需關心當前執行的平臺是哪個。

import Button from './components/Button';

使用Platform模組進行區分

Platform模組是React Native提供的一個內部模組，主要用於平臺的區分，我們看下程式碼：

container: {
    flex
 
: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },

var Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();

<Component />;
 

主要的使用方法為Platform.select, 框架會自動區分當前平臺，進行元件選擇。

此外我們也可以之間判斷平臺：

import { Platform, StyleSheet } from 'react-native';

var styles = StyleSheet.create({
  height: (Platform.OS === 'ios') ? 200 : 100,
});

Platform模組還有一個附加功能，即在android平臺可以檢測平臺的版本號：

import { Platform } from 'react-native';

if(Platform.Version === 21){
  console.log('Running on Lollipop!');
}