react native Expo适配全面屏/Expo识别全面屏和正常屏

时间:2024-08-02 14:35:32

一、最新版本的expo已经默认支持了全面屏,即不会像react native cli一样出现底部黑边

二、但是全面屏通过Dimensions.get('window')获取的高度还是不准确,因为全面屏的statusBar高度问题。

三、适配方案

通过获取屏幕纵横比来判断是否为全面屏

1、获取宽高

const {width,height} = Dimensions.get('window')

2、计算纵横比

const wh = height/width

3、全面屏手机一般纵横比wh大于1.8,正常手机屏幕小于1.8

4、获取statusBar高度

const { StatusBarManager } = NativeModules;

5、纵横比减去2个statusBar高度就是正常的了