react-native适配刘海屏按钮的处理

最新推荐文章于 2024-06-24 09:31:53 发布

ahnu119

最新推荐文章于 2024-06-24 09:31:53 发布

阅读量933

点赞数

文章标签： react native

本文链接：https://blog.csdn.net/ahnu119/article/details/109813950

版权

1.刘海屏手机我们要适配下上面导航栏和底部按钮

export function isIphoneX() {
  const window = Dimensions.get('window')
  return (
    Platform.OS === 'ios' &&
    !Platform.isPad &&
    !Platform.isTVOS && [812, 896].includes(window.height)
  )
}

export const iosTop = isIphoneX() ? 50 : 20

export const iosBottom = isIphoneX() ? 34 : 0

export const isLessKitKat = Platform.OS === 'android' && Platform.Version < 19

export const androidTop = isLessKitKat ? 0 : 24

2.使用过程中style设置:

navBarStyle: {
    android: {
      height: androidTop,
    },
    ios: {
      height: iosTop,
    },
}



bottomView: {
    height: 60 + iosBottom,
    paddingBottom: iosBottom,
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: getScreenWidth(),
    backgroundColor: 'white',
  },