fix: harmony 高度适配

irisSong · irisSong · commit 6e553d88af03 · 2024-09-12T17:37:56.000+08:00
diff --git a/src/packages/navbar/navbar.harmony.css b/src/packages/navbar/navbar.harmony.css
@@ -3,11 +3,11 @@
   position: relative;
   display: flex;
   flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: 44px;
   box-sizing: border-box;
   background: #f5f6fa;
-  background-color: #FFFFFF;
   box-shadow: 0 0 transparent;
   font-size: 14px;
   color: #1a1a1a;
@@ -33,9 +33,8 @@
   padding-left: 14px;
 }
 .nut-navbar-title {
-  min-width: 53%;
+  width: 50%;
   height: 100%;
-  margin: 0 auto;
   text-align: center;
   display: flex;
   flex-direction: row;
@@ -47,7 +46,6 @@
 }
 .nut-navbar-title-align-left {
   min-width: 0;
-  margin: 0;
   flex: 1;
   justify-content: flex-start;
   padding: 0 8px;
@@ -63,6 +61,7 @@
   display: flex;
   align-items: center;
   flex-direction: row;
+  height: 100%;
   cursor: pointer;
   padding: 0 14px;
   /* #ifndef rn harmony jd h5 weapp*/
diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss
@@ -3,11 +3,11 @@
   position: relative;
   display: flex;
   flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: $navbar-height;
   box-sizing: border-box;
   background: $navbar-background;
-  background-color: #ffffff;
   box-shadow: $navbar-box-shadow;
   font-size: $navbar-font-size;
   color: $navbar-color;
@@ -37,9 +37,8 @@
   }
 
   &-title {
-    min-width: 53%;
+    width: 50%;
     height: 100%;
-    margin: 0 auto;
     text-align: center;
     display: flex;
     flex-direction: row;
@@ -50,7 +49,6 @@
     color: $navbar-title-font-color;
     &-align-left {
       min-width: 0;
-      margin: 0;
       flex: 1;
       justify-content: flex-start;
       padding: 0 8px;
@@ -70,6 +68,7 @@
     display: flex;
     align-items: center;
     flex-direction: row;
+    height: 100%;
     cursor: pointer;
     padding: 0 14px;
     /* #ifndef rn harmony jd h5 weapp*/
diff --git a/src/packages/navbar/navbar.taro.tsx b/src/packages/navbar/navbar.taro.tsx
@@ -4,6 +4,8 @@ import { ITouchEvent, View } from '@tarojs/components'
 import { useRtl } from '@/packages/configprovider/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
+import { harmonyAndRn } from '@/utils/platform-taro'
+import pxTransform from '@/utils/px-transform'
 
 export interface NavBarProps extends BasicComponent {
   left: React.ReactNode
@@ -100,7 +102,9 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
       }
       setContentWidth(centerWidth.toFixed(2))
     }
-    init()
+    setTimeout(() => {
+      init()
+    }, 0)
   }, [left, right, back])
 
   const renderLeft = () => {
@@ -134,11 +138,11 @@ export const NavBar: FunctionComponent<Partial<NavBarProps>> = (props) => {
   const renderContent = () => {
     let titleStyle = {}
     if (titleAlign === 'center') {
-      const contentRealWidth = `${contentWidth}${
-        /%$/i.test(contentWidth) ? '' : 'px'
-      }`
+      const width = harmonyAndRn()
+        ? pxTransform(Number(contentWidth))
+        : `${contentWidth}px`
+      const contentRealWidth = /%$/i.test(contentWidth) ? contentWidth : width
       titleStyle = {
-        minWidth: contentRealWidth,
         width: contentRealWidth,
       }
     }
