ReactNative编写不同平台组件和样式

  1. 扩展名区分平台。针对不同平台使用拓展名字用以区分,此种形式是RN特有的一种方式。只要使用特定的拓展名,就会被RN框架进行区分识别
//在同一目录下创建扩展名不同的组件
Button.android.js
Button.ios.js

//然后直接这样使用,RN会自动根据平台使用对应的组件
import Button from './Button'
  1. 使用ReactNative的Platform模块进行区分
//首先,需要从react-native中引入Platform
import { Platform } from 'react-native'

//针对不同平台差异性编写对应的样式
styles: {
    flex: 1,
    position : "absolute",
    left:0,
    right:0,
    ...Platform.select({
        ios: {
            top:10
        },
        android: {
            top:5
        },
    }),
    height: (Platform.OS === 'ios') ? 100 : 110,
}

//针对不同平台差异性编写对应的组件
var HeaderComponent= Platform.select({
    ios: () => require('HeaderOfIOS'),
    android: () => require('HeaderOfAndroid'),
})();

;

你可能感兴趣的:(ReactNative编写不同平台组件和样式)