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

最新推荐文章于 2026-06-24 19:16:15 发布

原创最新推荐文章于 2026-06-24 19:16:15 发布 · 1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了一种针对刘海屏手机的UI适配方法，包括如何调整导航栏高度及底部按钮位置，确保不同设备上应用的一致性和可用性。

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',
  },

标签

#react native