React Native跨平台代码说明

React Native跨平台代码说明

(一)前言

前面已经介绍了很多关于配置、打包等一系列技术点，接下来我讲介绍一下辅助跨平台代码的几种方式。前面曾经提到过React Native的宗旨是什么？就是Learn once，write everywhere，这句话的意思是学一门语言或技术，可以写不同平台的代码，这其中隐含的意思是在不同平台可能需要分平台编写，这就是这篇文章的目的。比如：在Android与iOS界面代码就可能需要分平台编码，虽然业务逻辑层可以复用。

(二)异文件夹区分平台

这是一种直观方式，也就是在不同的文件夹下面放置不同的组件。具体实例如下：

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

(三)异文件名区分平台

另外一种方式是根据不同平台对组件文件名采用不同命名方式来区别，常见如下进行使用：

AlertViewIOS.js
AlertViewAndroid.js

下面两种是React Native框架支持的两种方式。

(四)异扩展名区分平台

React Native 会进行检测文件夹是否有.iOS或者.android的扩展名，然后根据当前客户端运行的平台进行加载对应的文件，例如，现在在项目有如下一些文件：

AlertView.ios.js
AlertView.android.js

只要写了两套相同的组件，并且它们提供的接口都是一致的，这时，你不需要关注当前客户端运行在哪个平台环境，React Native会自动检测不同平台的组件文件。

具体使用方式如下：

import AlertView from './components/AlertView';

React Native可以根据当前运行的平台去加载指定的组件文件。

(五)平台模块API区分平台

React Native也同样提供了检测客户端当前运行的平台模块，该模块在小范围的平台定制代码中很有用。具体如下方法：

var {Platform} = React;

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

如果当前是iOS系统，那么Platform.OS就会返回ios，反之在Android系统中就会返回android。

还有一个知识点，在Android平台上可以利用Platform模块检测Android版本。如代码所示：

var {Platform} = React;

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

转载自：http://www.lcode.org/