微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

React Native 组件之SafeAreaView

SafeAreaView简介

ReactNative官方从0.50.1版本开始,加入了针对iPhone X设备齐刘海页面适配的组件SafeAreaView,为ReactNative开发APP时对iPhone X的页面适配提供了很大的方便。目前,SafeAreaView只适合iOS设备。
SafeAreaView的使用也非常简单,只需要将SafeAreaView嵌套在最根级别的视图中即可,并且在style中加上flex:1等页面样式。

<SafeAreaView style={{flex: 1,backgroundColor: '#fff'}}> <View style={{flex: 1}}> <Text>Hello World!</Text> </View> </SafeAreaView>

下面是我之前一个项目的关于iPhone X的刘海屏设计的效果

需要注意的是,使用了RN来开发页面时,不要忘了在RN中修改相应NaviBar/TabBar的高度(如isIOS ? 64 : 42)。

为了完成iPhone X的适配工作,我们还需要某些判断操作,例如下面是判断iPhone X的工具类。

import {
    PixelRatio,Dimensions,Platform
} from 'react-native';

export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;
// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;

/** * 判断是否为iphoneX * @returns {boolean} */
export function isIphoneX() {
    return (
        Platform.OS === 'ios' &&
        ((screenH === X_HEIGHT && screenW === X_WIDTH) ||
            (screenH === X_WIDTH && screenW === X_HEIGHT))
    )
}

/** * 根据是否是iPhoneX返回不同的样式 * @param iphonexstyle * @param iosstyle * @param androidStyle * @returns {*} */

export function ifIphoneX(iphonexstyle,iosstyle,androidStyle) {
    if (isIphoneX()) {
        return iphonexstyle;
    } else if (Platform.OS === 'ios') {
        return iosstyle
    } else {
        if (androidStyle) return androidStyle;
        return iosstyle
    }
}

然后我们在适配前进行相关的判断,然后使用SafeAreaView进行适配即可。例如:

export function ifIphoneX (iphonexstyle,regularstyle) {  
    if (isIphoneX()) {  
        return iphonexstyle;  
    } else {  
        return regularstyle  
    }  
}

然后根据返回的环境,添加不同的StyleSheet样式即可。

const styles = StyleSheet.create({  
    topBar: {  
        backgroundColor: '#ffffff',...ifIphoneX({  
            paddingTop: 44  
        },{  
            paddingTop: 20  
        })  
    },})

SafeAreaView的属性和View组件的属性类似,大家可以参照View的使用来给SafeAreaView进行属性设置。
SafeAreaView组件官方资料

原文地址:https://www.jb51.cc/react/301441.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐