uni-app iOS原生导航栏角标未居中

示例代码：

{  
    "path": "pages/map/map",  
    "style": {  
        "navigationBarTitleText": "附近司机",  
        "navigationBarTextStyle": "black",  
        "app-plus": {  
            "titleNView": {  
                "type": "transparent",  
                "backButton": {  
                    "background": "rgba(78,151,251,.8)",  
                    "fontSize": "24px"  
                },  
                "buttons": [{  
                    "text": "\ue629",  
                    "fontSrc": "/static/font/iconfont.ttf",  
                    "fontSize": "24px",  
                    "color": "#FFFFFF",  
                    "background": "rgba(78,151,251,.8)"  
                }]  
            }  
        }  
    }  
}

操作步骤：

{
"path": "pages/map/map",
"style": {
"navigationBarTitleText": "附近司机",
"navigationBarTextStyle": "black",
"app-plus": {
"titleNView": {
"type": "transparent",
"backButton": {
"background": "rgba(78,151,251,.8)",
"fontSize": "24px"
},
"buttons": [{
"text": "\ue629",
"fontSrc": "/static/font/iconfont.ttf",
"fontSize": "24px",
"color": "#FFFFFF",
"background": "rgba(78,151,251,.8)"
}]
}
}
}

预期结果：

居中对齐

实际结果：

偏移

bug描述：

iOS原生导航栏角标设置透明后未居中，安卓正常。

iPhone12和iPhone6均能复现，怀疑是全系都有这个问题。

测试发现，仅设置"type": "transparent"时正常。

设置backButton和buttons时背景位置偏移，很明显的是返回按钮背景贴边了。

wuwangju 1楼•17 小时前

在 uni-app 中，如果你发现 iOS 原生导航栏的角标（如未读消息数等）未居中显示，可能是由于样式或配置问题导致的。以下是一些可能的解决方案：

1. 检查样式

确保你的角标样式设置正确，特别是 padding 和 margin 属性。你可以通过以下方式调整样式：

.badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  background-color: red;
  color: white;
  border-radius: 50%;
  text-align: center;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
}

2. 使用 `uni.setTabBarBadge` 方法

如果你是在 TabBar 上设置角标，可以使用 uni.setTabBarBadge 方法，它会自动处理角标的居中问题。

uni.setTabBarBadge({
  index: 0, // TabBar 的索引
  text: '5' // 角标内容
});

3. 使用 `uni.setNavigationBarTitle` 方法

如果你是在导航栏上设置角标，可以使用 uni.setNavigationBarTitle 方法，并结合自定义样式来实现角标的居中。

uni.setNavigationBarTitle({
  title: '标题 (5)' // 在标题中显示角标
});

4. 自定义导航栏

如果上述方法无法满足你的需求，你可以考虑使用自定义导航栏。通过隐藏原生导航栏，并使用 view 组件自定义导航栏，可以更灵活地控制角标的位置。

<template>
  <view class="custom-navbar">
    <view class="title">标题</view>
    <view class="badge">5</view>
  </view>
</template>

<style>
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background-color: #fff;
  position: relative;
}

.title {
  font-size: 18px;
}

.badge {
  position: absolute;
  top: 5px;
  right: 10px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 5px;
  font-size: 12px;
}
</style>

5. 检查 iOS 原生配置

如果你使用的是 iOS 原生导航栏，确保在 pages.json 中的配置正确。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "标题",
        "navigationBarTextStyle": "black",
        "navigationBarBackgroundColor": "#ffffff",
        "app-plus": {
          "titleNView": {
            "titleText": "标题",
            "titleColor": "#000000",
            "backgroundColor": "#ffffff"
          }
        }
      }
    }
  ]
}