React-Native编写针对平台的代码

前言

我们在实际项目开发中，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!');
}