美文网首页
ReactNative编写不同平台组件和样式

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

作者: 唔知啊 | 来源:发表于2017-08-09 18:00 被阅读0次
    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/>;
    
    

    相关文章

      网友评论

          本文标题:ReactNative编写不同平台组件和样式

          本文链接:https://www.haomeiwen.com/subject/bbuqrxtx.html