NavBar 自定义导航栏，在微信小程序安全区失效

[xileliu]

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

"@nutui/nutui-react-taro": "^2.6.8",

平台

weapp

重现链接

暂无

重现步骤

<NavBar fixed={true} className="sear" placeholder // safeAreaInsetTop={true} back={ <> {/ /} 返回 </> } right={ <span className="flex-center" onClick={(e) => showToast({ title: 'icon' })}> {/ /} 1231231223 } onBackClick={(e) => showToast({ title: '返回' })}

<span onClick={(e) => showToast({ title: '标题' })}>订单详情aeq123123

期望的结果是什么？

顶部自定一导航，能和微信小程序右侧胶囊部分垂直居中对齐吗，并且能够把ios 机型的顶部安全区让开。最终实现与原生小程序带的带有返回的导航栏一致

实际的结果是什么？

环境信息

Taro v3.6.31

Taro CLI 3.6.31 environment info: System: OS: macOS 14.3 Shell: 5.9 - /bin/zsh Binaries: Node: 18.10.0 - ~/.nvm/versions/node/v18.10.0/bin/node Yarn: 1.22.22 - /opt/homebrew/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v18.10.0/bin/npm npmPackages: @tarojs/cli: 3.6.31 => 3.6.31 @tarojs/components: 3.6.31 => 3.6.31 @tarojs/helper: 3.6.31 => 3.6.31 @tarojs/plugin-framework-react: 3.6.31 => 3.6.31 @tarojs/plugin-html: ^3.6.31 => 3.6.31 @tarojs/plugin-platform-alipay: 3.6.31 => 3.6.31 @tarojs/plugin-platform-h5: 3.6.31 => 3.6.31 @tarojs/plugin-platform-jd: 3.6.31 => 3.6.31 @tarojs/plugin-platform-qq: 3.6.31 => 3.6.31 @tarojs/plugin-platform-swan: 3.6.31 => 3.6.31 @tarojs/plugin-platform-tt: 3.6.31 => 3.6.31 @tarojs/plugin-platform-weapp: 3.6.31 => 3.6.31 @tarojs/react: 3.6.31 => 3.6.31 @tarojs/runtime: 3.6.31 => 3.6.31 @tarojs/shared: 3.6.31 => 3.6.31 @tarojs/taro: 3.6.31 => 3.6.31 @tarojs/taro-loader: 3.6.31 => 3.6.31 @tarojs/webpack5-runner: 3.6.31 => 3.6.31 babel-preset-taro: 3.6.31 => 3.6.31 eslint-config-taro: 3.6.31 => 3.6.31 react: ^18.0.0 => 18.3.1

其他补充信息

暂无

[oasis-cloud]

需要自己计算下胶囊的位置，采用 px 设置距离

[xileliu]

好吧