uni-app 在IOS平台下使用setStyle动态更改原生导航栏会导致左侧返回按钮丢失 Android平台正常

uni-app 在IOS平台下使用setStyle动态更改原生导航栏会导致左侧返回按钮丢失 Android平台正常

开发环境 版本号 项目创建方式
Windows 10专业版 15063.632 HBuilderX 
产品分类：uniapp/App

<image>

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.9

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iPhone11，iPhone 12

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

示例代码：


webView.setStyle({  
    titleNView: {  
        "searchInput": {  
            "backgroundColor": "#F4F8FA",  
            "placeholderColor": "#ADB2C6",  
            "borderRadius": "15px",  
            "placeholder":"请输入",  
        }  
    }  
});

在onReady、onShow生命周期里产生结果都一样

操作步骤： 有需求需要动态将页面导航栏标题变成可输入的搜索框，但文档只有动态变更文字的方法：setTitleNViewSearchInputText，因此使用setStyle达到需求效果。但IOS环境下会丢失左侧的返回按钮，Android平台正常。此外导航栏右侧还有两个操作按钮（搜索、筛选）。setStyle不会对page.json里配置的该两个操作按钮产生影响

预期结果： 动态将原生导航栏标题变更为搜索框之后，左右两侧的操作按钮显示和功能正常。

实际结果： IOS平台下（IOS14-IPhone11 IPhone12），左侧返回按钮丢失。 Android平台一切正常。 右侧自定义按钮一切正常（IOS、Android）。

bug描述： 在使用动态设置原生导航栏方法webview.setStyle()时，在IOS平台下导航栏左侧的返回按钮会丢失，但Android平台正常。


更多关于uni-app 在IOS平台下使用setStyle动态更改原生导航栏会导致左侧返回按钮丢失 Android平台正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

提供一个完整的demo来测试

更多关于uni-app 在IOS平台下使用setStyle动态更改原生导航栏会导致左侧返回按钮丢失 Android平台正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 iOS 平台兼容性问题。当使用 webView.setStyle 动态修改原生导航栏的 titleNView 配置时，iOS 会重新渲染整个导航栏，导致默认返回按钮被重置。

问题分析：

  1. iOS 对原生导航栏的实现机制与 Android 不同
  2. setStyle 方法会触发导航栏完整重建，而 iOS 默认返回按钮未被自动恢复
  3. 右侧自定义按钮因在配置中明确声明，所以能够保留

解决方案： 建议改用条件编译针对 iOS 平台单独处理：

// #ifdef APP-PLUS
const currentWebview = this.$scope.$getAppWebview();
const style = {
  titleNView: {
    "searchInput": {
      "backgroundColor": "#F4F8FA",
      "placeholderColor": "#ADB2C6",
      "borderRadius": "15px",
      "placeholder": "请输入"
    }
  }
};

// iOS 平台需要显式保留返回按钮
// #ifdef APP-IOS
style.titleNView.autoBackButton = true;
// #endif

currentWebview.setStyle(style);
// #endif
回到顶部