平台适配

编写一个跨平台的app,你肯定希望代码的复用的越多越好,如果代码不一样,就要为ios和android

各准备一套组件了。

React Native提供了两种管理代码的方法:

有些组件只能在一个平台运行,这些属性都用 @platform ,在网址上这些属性旁边都有个小标记。

平台模块

React Native有个模块可以检测app是运行在哪个平台,如果组件只有一小部分不同就可以用这个区

分平台的方案。

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


const styles = StyleSheet.create({

  height: (Platform.OS === 'vr') ? 1 : 100,

});

在WebVR中Platform.OS就是vr

还有一个Platform.select方法可以用,它给出了把Platform.OS作为键的对象,返回现在运行的平

台的值。

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


const styles = StyleSheet.create({

  container:{

    flex: 1,

    ...Platform.select({

       ios: {

        backgroundColor: 'red',

      },

       android: {

        backgroundColor: 'blue',

      },

       vr: {

        backgroundColor: 'orange',

      },

    }),

  },

});

在三个平台中,都有一个flex为1的容器,只不过三个容器的颜色各不相同而已。

特定平台扩展名

当你的代码比较复杂,需要考虑分开放在不同的文件中时,就可以用这种方式了,在文件名后面加

上平台的后缀,如下所示:

BigButton.ios.js

BigButton.android.js

BigButton.vr.js

这样你就可以在组件引用了:

const BigButton = require('./BigButton');

这样不同的平台就会自动选择不同的文件加载了。