使用原生导航栏 实现右上角编辑完成按钮切换

要实现一个需求页面 顶部导航栏 右侧显示“编辑”按钮，点击编辑按钮可以切换文字显示“完成”

我们通常的做法是直接把原生导航栏干掉，使用自定义导航栏。
但是，自己写的导航栏总是看起来不太规范 字体太大 颜色不对 高度不对，跟原生导航栏一对比还是差点劲！
所以我建议，尽量使用原生导航栏！原生导航栏实在满足不了需求咱们再自己重写！

如下设置：就可以实现非常规范又好看的带右侧编辑按钮的原生导航栏

{  
  "pages": [  
    {  
      "path": "pages/index/index",  
      "style": {  
        "navigationBarTitleText": "设置原生标题右侧文字",  
        "app-plus": {  
          "titleNView": {  
            "titleColor": "#333",  
            "buttons": [{  
              "type": "none",  
              "width": "50px",  
              "fontSrc": "",  
              "text": "编辑",  
              "fontSize": "16px",  
              "color": "#333"  
            }]  
          }  
        }  
      }  
    }  
  ]  
}  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                isEdit: false  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        },  
        onNavigationBarButtonTap(e) {  
            // #ifdef APP-PLUS    
            var webView = this.$mp.page.$getAppWebview();  
            let str = "";  
            this.isEdit = !this.isEdit;  
            this.isEdit ? str = "编辑" : str = "完成";  
            webView.setTitleNViewButtonStyle(0, {  
                text: str,  
            });  
            // #endif  
        }  
    }

参考文章：
插件市场 非常全面好用的 原生导航栏 示例应用，一定要好好收藏！能用原生导航栏的就别自己手写
https://ext.dcloud.net.cn/plugin?id=1765
微信小程序自定义导航栏(z-navbar)
https://ext.dcloud.net.cn/plugin?id=10685
关于状态栏的设置，扩展阅读。在自定义原生导航栏时，会需要注意状态栏高度的设置。常用的状态栏css变量一定要用起来，不要再重复造轮子
https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-变量