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'),
})();

<HeaderComponent/>;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,089评论 25 709
  • 序言 这是一个在StuQ做分享时的讲稿。当然还有很大的改进空间,但我这会却没有什么劲头继续改进,既然这样就不如索性...
    利炳根阅读 15,044评论 12 72
  • 1、如果你有颈椎病 2、如果你有腰间盘突出 3、如果你有骨质增生 4、如果你有风湿性关节炎 5、如果您正受骨病折磨...
    SvenChen阅读 564评论 0 0
  • 这世界不是游乐场,它是名利场,即使你手无寸铁,也会有人逼你缴械投降。
    suky_7c78阅读 74评论 0 0
  • 秋雨 应该有一所墙院 院子里 应该有一些鸡犬 鸡犬 应该有一些邻居,伙伴 这些邻居和伙伴 应该有一些固定不固定的地...
    公子九月回阅读 192评论 0 0