小程序全屏情况下怎样去适配刘海屏iphone？

微信小程序开发如果去除自带头部，全屏情况下刘海屏适配非常困难。

比如我头部的文字想要和iphone 刘海屏 版微信 的自带按钮相对齐，就很困难。

window: {
    navigationStyle: 'custom',
},
//  navigationStyle 接受两个参数 ['default', 'custom']: ['系统导航栏， 默认值', '隐藏系统导航栏']

这里隐藏掉默认的导航栏之后 可以通过自定义组件的形式，DIY 一个导航栏， 值得注意的是， 当隐藏系统导航栏后， 页面会直接顶到状态栏上， 不同机型的状高度可能不一致， 尤其是针对 苹果 X 的刘海屏等 水滴屏， 需要做适配

不止刘海屏问题。Android系统根IOS系统的手机状态栏高度也不一致。

 Taro.getSystemInfo 中 有个属性叫做 statusBarHeight ， 通过此方法即可获取手机状态栏的高度.

通过wx.getSystemInfoSync().statusBarHeight设置高度

Taro获取高度信息，版本版本不一样。

新版 ：Taro.getSystemInfo，这个方法是异步的。同步的方法：Taro.getSystemInfoSync()，具体查看：https://docs.taro.zone/docs/apis/base/system/getSystemInfoSync

class Index extends Component<PageProps, PageState> {
  constructor(props) {
    super(props);
    const res = Taro.getSystemInfoSync()
    const {statusBarHeight} = res
    this.state = {
      statusBarHeight: statusBarHeight || 30,
    }
  }
  render() {
    return (
      <View className='full-page flex-column'>
        <View className='home-header flex-column justify-content-between'>
          <Image style={{paddingTop: `${statusBarHeight - 5}px`}} className='home-logo-box' src='&&&&' />
        </View>
      <View/
    );
  }
}

具体参考：https://github.com/lingxiaoyi/Taro-navigation-bar/blob/master/src/components/navbar_lxy/index.js

更多的方法，可以参考，小程序解决自定义导航栏--刘海屏自适应问题：https://blog.csdn.net/weixin_43612234/article/details/97171448

参考文章：

• 微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能：https://developers.weixin.qq.com/community/develop/article/doc/00068aec7941f8f57509794be54413?page=2

• 移动端 Taro 小程序 自定义导航栏： https://www.dazhuanlan.com/wdy5201314/topics/1042554

转载本站文章《小程序全屏情况下怎样去适配刘海屏iphone？》,
请注明出处：https://www.zhoulujun.cn/html/webfront/AppDev/taro/8718.html