@nutui/nutui-react-taro 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/es/packages/countdown/style/countdown.scss

@@ -6,6 +6,7 @@
   font-size: $countdown-font-size;
   &-number-primary,
   &-number,
+  &-number-text,
   &-unit {
     display: flex;
     align-items: center;
@@ -20,19 +21,24 @@
     padding: $countdown-number-padding;
     border-radius: $countdown-number-border-radius;
     margin: $countdown-number-margin;
+    text-align: center;
   }
   &-number {
     border: 1px solid $countdown-number-border-color;
     background-color: $countdown-number-background-color;
     color: $countdown-number-color;
-    text-align: center;
   }
   &-number-primary {
     border: 1px solid $countdown-number-primary-border-color;
     background-color: $countdown-number-primary-background-color;
     color: $countdown-number-primary-color;
   }
+  &-number-text {
+    border: 0;
+    background-color: transparent;
+    color: $countdown-number-color;
+  }
   &-unit {
-    color: $color-primary;
+    color: $countdown-color;
   }
 }

package/dist/es/packages/countdown/style/style.css

@@ -3,33 +3,38 @@
   flex-direction: row;
   align-items: center;
   color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23));
-  font-size: var(--nutui-countdown-font-size, 10px);
+  font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px));
 }
-.nut-countdown-number-primary, .nut-countdown-number, .nut-countdown-unit {
+.nut-countdown-number-primary, .nut-countdown-number, .nut-countdown-number-text, .nut-countdown-unit {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--nutui-countdown-height, 14px);
-  font-weight: var(--nutui-countdown-font-weight, 400);
-  font-size: var(--nutui-countdown-font-size, 10px);
+  height: var(--nutui-countdown-height, 16px);
+  font-weight: var(--nutui-countdown-font-weight, var(--nutui-font-weight, 400));
+  font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-countdown-number, .nut-countdown-number-primary {
-  min-width: var(--nutui-countdown-width, 20px);
-  padding: var(--nutui-countdown-number-padding, 0 1px);
-  border-radius: var(--nutui-countdown-number-border-radius, 2px);
-  margin: var(--nutui-countdown-number-margin, 0 2px);
+  min-width: var(--nutui-countdown-width, 16px);
+  padding: var(--nutui-countdown-number-padding, 0 0);
+  border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2px));
+  margin: var(--nutui-countdown-number-margin, 0 1px);
+  text-align: center;
 }
 .nut-countdown-number {
   border: 1px solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-light-pressed, #ffebf1));
-  background-color: var(--nutui-countdown-number-background-color, transparent);
+  background-color: var(--nutui-countdown-number-background-color, var(--nutui-color-background-overlay, #ffffff));
   color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23));
-  text-align: center;
 }
 .nut-countdown-number-primary {
   border: 1px solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23));
   background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff0f23));
-  color: var(--nutui-countdown-number-primary-color, #ffffff);
+  color: var(--nutui-countdown-number-primary-color, var(--nutui-color-primary-text, #ffffff));
+}
+.nut-countdown-number-text {
+  border: 0;
+  background-color: transparent;
+  color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-countdown-unit {
-  color: var(--nutui-color-primary, #ff0f23);
+  color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23));
 }

package/dist/es/packages/countdown/types.d.ts

@@ -0,0 +1,26 @@
+import { BasicComponent } from "../../utils/typings";
+export type CountDownType = 'default' | 'primary' | 'text';
+export interface CountDownTimeProps {
+    d: number;
+    h: number;
+    m: number;
+    s: number;
+    ms: number;
+}
+export interface CountDownProps extends BasicComponent {
+    type: CountDownType;
+    paused: boolean;
+    startTime: number;
+    endTime: number;
+    remainingTime: number;
+    millisecond: boolean;
+    format: string;
+    autoStart: boolean;
+    time: number;
+    destroy: boolean;
+    onEnd: () => void;
+    onPaused: (restTime: number) => void;
+    onRestart: (restTime: number) => void;
+    onUpdate: (restTime: string | CountDownTimeProps) => void;
+    children: React.ReactNode;
+}

package/dist/es/packages/countdown/types.js

@@ -0,0 +1 @@
+export { };

package/dist/es/packages/countup/style/countup.scss

@@ -9,9 +9,8 @@
   &-listitem {
     height: $countup-height;
     overflow: hidden;
-    color: $color-title;
-    font-size: $countup-base-size;
-    font-weight: $font-weight-bold;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
 
     &-number {
       margin: 0 $countup-lr-margin;
@@ -26,6 +25,8 @@
     height: 80%;
     align-items: flex-end;
     color: $countup-bg-color;
+    font-size: $countup-base-size;
+    font-weight: $font-weight-bold;
   }
 
   &-number {
@@ -33,10 +34,15 @@
     flex-direction: column;
     align-items: center;
     width: $countup-width;
+    transition: transform 1s ease-in-out;
+    transform: translate(0, 0);
 
-    span {
+    &-text {
       height: $countup-height;
       line-height: $countup-height;
+      color: $countup-color;
+      font-size: $countup-base-size;
+      font-weight: $font-weight-bold;
     }
   }
 }

package/dist/es/packages/countup/style/style.css

@@ -7,9 +7,8 @@
 .nut-countup-listitem {
   height: var(--nutui-countup-height, 32px);
   overflow: hidden;
-  color: var(--nutui-color-title, #1a1a1a);
-  font-size: var(--nutui-countup-base-size, 18px);
-  font-weight: var(--nutui-font-weight-bold, 600);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
 }
 .nut-countup-listitem-number {
   margin: 0 var(--nutui-countup-lr-margin, 0);
@@ -22,14 +21,21 @@
   height: 80%;
   align-items: flex-end;
   color: var(--nutui-countup-bg-color, inherit);
+  font-size: var(--nutui-countup-base-size, 18px);
+  font-weight: var(--nutui-font-weight-bold, 600);
 }
 .nut-countup-number {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: var(--nutui-countup-width, auto);
+  transition: transform 1s ease-in-out;
+  transform: translate(0, 0);
 }
-.nut-countup-number span {
+.nut-countup-number-text {
   height: var(--nutui-countup-height, 32px);
   line-height: var(--nutui-countup-height, 32px);
+  color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-countup-base-size, 18px);
+  font-weight: var(--nutui-font-weight-bold, 600);
 }

package/dist/es/packages/dialog/style/dialog.scss

@@ -5,7 +5,7 @@
   flex-direction: column;
   align-items: center;
   width: $dialog-width;
-  max-height: 67%;
+  // max-height: 67%;
   min-height: $dialog-min-height;
   padding: $dialog-padding;
   box-sizing: border-box;
@@ -40,27 +40,30 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    top: $dialog-close-top;
     color: $dialog-close-color;
     .nut-icon {
-      font-size: 24px;
-      height: 24px;
-      width: 24px;
+      font-size: $dialog-close-width;
+      width: $dialog-close-width;
+      height: $dialog-close-height;
     }
 
     &-top-right {
+      top: $dialog-close-top;
       right: $dialog-close-right;
     }
 
     &-top-left {
+      top: $dialog-close-top;
       left: $dialog-close-left;
     }
 
     &-bottom {
-      top: initial;
       bottom: -56px;
       left: 50%;
-      transform: translate(-50%);
+      transform: translateY(-50%);
+      .nut-icon {
+        color: $dialog-close-color;
+      }
     }
 
     &:active {

package/dist/es/packages/dialog/style/style.css

@@ -1,7 +1,6 @@
 .nut-button {
   position: relative;
   display: flex;
-  display: inline-block;
   /* #ifdef rn harmony*/
   width: 80px;
   /* #endif */
@@ -16,14 +15,14 @@
   margin: 0;
   padding: 0;
   height: var(--nutui-button-default-height, 32px);
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
   font-weight: var(--nutui-button-default-font-weight, var(--nutui-font-weight, 400));
   text-align: center;
   cursor: pointer;
   transition: opacity 0.2s;
-  -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
+  -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a));
   background: var(--nutui-button-default-background-color, transparent);
@@ -72,9 +71,9 @@
   /* #endif */
 }
 .nut-button-wrap .nut-icon {
-  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
-  width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
-  height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14px));
+  font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  width: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
+  height: var(--nutui-button-default-font-size, var(--nutui-font-size-s, 12px));
 }
 .nut-button-loading::before, .nut-button-disabled::before {
   display: none;
@@ -87,6 +86,18 @@
   width: var(--nutui-button-default-height, 32px);
   padding: 0;
 }
+.nut-button-round {
+  border-radius: var(--nutui-button-border-radius, 8px);
+}
+.nut-button-round-xlarge, .nut-button-round-large {
+  border-radius: var(--nutui-button-large-border-radius, 12px);
+}
+.nut-button-round-small {
+  border-radius: var(--nutui-button-small-border-radius, 8px);
+}
+.nut-button-round-mini {
+  border-radius: var(--nutui-button-mini-border-radius, 6px);
+}
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px 12px);
   border-style: solid;
@@ -111,37 +122,52 @@
 .nut-button-xlarge {
   height: var(--nutui-button-xlarge-height, 48px);
   padding: var(--nutui-button-xlarge-padding, 0px 24px);
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.nut-button-xlarge .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-xlarge .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
 }
 .nut-button-xlarge .nut-icon {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
-  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
-  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
+  height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-button-xlarge-children {
-  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xxl, 24px));
+  font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-button-large {
   height: var(--nutui-button-large-height, 40px);
   padding: var(--nutui-button-large-padding, 0px 16px);
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
+  border-radius: var(--nutui-radius-base, 8px);
+}
+.nut-button-large .nut-button-text {
+  margin-left: var(--nutui-button-xlarge-text-icon-margin, 6px);
+}
+.nut-button-large .nut-button-text-right {
+  margin-right: var(--nutui-button-xlarge-text-icon-margin, 6px);
 }
 .nut-button-large .nut-icon {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
-  height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  width: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
+  height: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-button-large-children {
-  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 16px));
+  font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-button-large-font-weight, var(--nutui-font-weight-bold, 600));
 }
 .nut-button-small {
   height: var(--nutui-button-small-height, 28px);
   padding: var(--nutui-button-small-padding, 0px 8px);
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-button-small .nut-icon {
   font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12px));
@@ -154,15 +180,16 @@
 .nut-button-mini {
   height: var(--nutui-button-mini-height, 24px);
   padding: var(--nutui-button-mini-padding, 0px 8px);
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  border-radius: var(--nutui-radius-s, 6px);
 }
 .nut-button-mini .nut-icon {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
-  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
-  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
+  height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-mini-children {
-  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-s, 12px));
+  font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11px));
 }
 .nut-button-primary {
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
@@ -173,7 +200,7 @@
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-primary-solid {
-  background: var(--nutui-color-primary, #ff0f23);
+  background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%);
   color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   border-color: transparent;
 }
@@ -333,18 +360,6 @@
   cursor: default;
   opacity: 0.9;
 }
-.nut-button-round {
-  border-radius: var(--nutui-button-border-radius, 8px);
-}
-.nut-button-round-xlarge, .nut-button-round-large {
-  border-radius: var(--nutui-button-large-border-radius, 12px);
-}
-.nut-button-round-small {
-  border-radius: var(--nutui-button-small-border-radius, 8px);
-}
-.nut-button-round-mini {
-  border-radius: var(--nutui-button-mini-border-radius, 6px);
-}
 .nut-button-square {
   border-radius: var(--nutui-button-square-border-radius, 0);
 }
@@ -430,7 +445,6 @@
   flex-direction: column;
   align-items: center;
   width: var(--nutui-dialog-width, 295px);
-  max-height: 67%;
   min-height: var(--nutui-dialog-min-height, 124px);
   padding: var(--nutui-dialog-padding, 24px);
   box-sizing: border-box;
@@ -461,25 +475,28 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  top: var(--nutui-dialog-close-top, 16px);
   color: var(--nutui-dialog-close-color, #ffffff);
 }
 .nut-dialog-close .nut-icon {
-  font-size: 24px;
-  height: 24px;
-  width: 24px;
+  font-size: var(--nutui-dialog-close-width, 18px);
+  width: var(--nutui-dialog-close-width, 18px);
+  height: var(--nutui-dialog-close-height, 18px);
 }
 .nut-dialog-close-top-right {
+  top: var(--nutui-dialog-close-top, 16px);
   right: var(--nutui-dialog-close-right, 16px);
 }
 .nut-dialog-close-top-left {
+  top: var(--nutui-dialog-close-top, 16px);
   left: var(--nutui-dialog-close-left, 16px);
 }
 .nut-dialog-close-bottom {
-  top: initial;
   bottom: -56px;
   left: 50%;
-  transform: translate(-50%);
+  transform: translateY(-50%);
+}
+.nut-dialog-close-bottom .nut-icon {
+  color: var(--nutui-dialog-close-color, #ffffff);
 }
 .nut-dialog-close:active {
   opacity: 0.7;

package/dist/es/packages/ellipsis/ellipsis.d.ts

@@ -39,7 +39,7 @@ export interface EllipsisProps extends BasicComponent {
     lineHeight: number | string
     width: number | string;
     /**
-    * 文本点击是触发
+    * 文本点击时触发
     * @default -
     */
     onClick: () => void

package/dist/es/packages/image/image.js

@@ -7,7 +7,7 @@ import Taro from "@tarojs/taro";
 import { Image as TImage, View } from "@tarojs/components";
 import { Image as ImageIcon, ImageError } from "@nutui/icons-react-taro";
 import classNames from "classnames";
-import { harmonyAndRn } from "../../utils/platform-taro";
+import pxTransform from "../../utils/px-transform";
 var defaultProps = {
     src: '',
     error: true,
@@ -30,7 +30,7 @@ export var Image = function(props) {
     var _useState = _sliced_to_array(useState(true), 2), innerLoading = _useState[0], setInnerLoading = _useState[1];
     var _useState1 = _sliced_to_array(useState(false), 2), isError = _useState1[0], setIsError = _useState1[1];
     var pxCheck = function(value) {
-        return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
+        return Number.isNaN(Number(value)) ? String(value) : pxTransform(+value);
     };
     // 图片加载
     var handleLoad = function(e) {
@@ -47,9 +47,9 @@ export var Image = function(props) {
     };
     var containerStyle = {
         // eslint-disable-next-line no-nested-ternary
-        height: height ? Taro.getEnv() === 'RN' ? height : pxCheck(height) : Taro.getEnv() === 'WEB' ? '' : '100%',
+        height: height ? pxCheck(height) : Taro.getEnv() === 'WEB' ? '' : '100%',
         // eslint-disable-next-line no-nested-ternary
-        width: width ? Taro.getEnv() === 'RN' ? width : pxCheck(width) : Taro.getEnv() === 'WEB' ? '' : '100%',
+        width: width ? pxCheck(width) : Taro.getEnv() === 'WEB' ? '' : '100%',
         overflow: radius !== undefined && radius !== null ? 'hidden' : '',
         borderRadius: // eslint-disable-next-line no-nested-ternary
         radius !== undefined && radius != null ? Taro.getEnv() === 'RN' ? radius : pxCheck(radius) : ''
@@ -106,6 +106,6 @@ export var Image = function(props) {
         onError: function(e) {
             return handleError(e);
         }
-    })), !harmonyAndRn() && /*#__PURE__*/ React.createElement(React.Fragment, null, renderLoading(), renderErrorImg()));
+    })), /*#__PURE__*/ React.createElement(React.Fragment, null, renderLoading(), renderErrorImg()));
 };
 Image.displayName = 'NutImage';

package/dist/es/packages/loading/loading.d.ts

@@ -3,20 +3,8 @@ import { BasicComponent } from "../../utils/typings";
 export type LoadingType = 'spinner' | 'circular';
 export type LoadingDirection = 'horizontal' | 'vertical';
 export interface LoadingProps extends BasicComponent {
-    /**
-    * loading图标的样式
-    * @default circular
-    */
-    type: LoadingType
-    /**
-    * loading图标和文字的排列方式
-    * @default horizontal
-    */
-    direction: LoadingDirection
-    /**
-    * 自定义loading的图标
-    * @default -
-    */
-    icon?: ReactNode
+    type: LoadingType;
+    direction: LoadingDirection;
+    icon?: ReactNode;
 }
 export declare const Loading: FunctionComponent<Partial<LoadingProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/es/packages/navbar/navbar.js

@@ -7,8 +7,11 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
+import { useRtl } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { getRectByTaro } from "../../utils/get-rect-by-taro";
+import { harmonyAndRn } from "../../utils/platform-taro";
+import pxTransform from "../../utils/px-transform";
 import { SafeArea } from "../safearea/safearea";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     left: '',
@@ -23,6 +26,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 export var NavBar = function(props) {
     var _$_object_spread = _object_spread({}, defaultProps, props), right = _$_object_spread.right, left = _$_object_spread.left, titleAlign = _$_object_spread.titleAlign, className = _$_object_spread.className, style = _$_object_spread.style, back = _$_object_spread.back, fixed = _$_object_spread.fixed, safeAreaInsetTop = _$_object_spread.safeAreaInsetTop, placeholder = _$_object_spread.placeholder, zIndex = _$_object_spread.zIndex, onBackClick = _$_object_spread.onBackClick;
     var classPrefix = 'nut-navbar';
+    var rtl = useRtl();
     var children = Array.isArray(props.children) ? props.children : [
         props.children
     ];
@@ -115,18 +119,21 @@ export var NavBar = function(props) {
                 return _ref.apply(this, arguments);
             };
         }();
-        init();
+        setTimeout(function() {
+            init();
+        }, 0);
     }, [
         left,
         right,
         back
     ]);
     var renderLeft = function() {
+        var _obj, _obj1;
         return back || left ? /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-left"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-left"), true), _define_property(_obj, "".concat(classPrefix, "-left-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-left-rtl"), rtl), _obj)),
             ref: leftRef
         }, back && /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-left-back"),
+            className: classNames((_obj1 = {}, _define_property(_obj1, "".concat(classPrefix, "-left-back"), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-align-").concat(titleAlign), true), _define_property(_obj1, "".concat(classPrefix, "-left-back-children"), left), _define_property(_obj1, "".concat(classPrefix, "-left-back-children-rtl"), left && rtl), _obj1)),
             onClick: function(e) {
                 return onBackClick(e);
             }
@@ -135,20 +142,22 @@ export var NavBar = function(props) {
     var renderContent = function() {
         var titleStyle = {};
         if (titleAlign === 'center') {
-            var contentRealWidth = "".concat(contentWidth).concat(/%$/i.test(contentWidth) ? '' : 'px');
+            var width = harmonyAndRn() ? pxTransform(Number(contentWidth)) : "".concat(contentWidth, "px");
+            var contentRealWidth = /%$/i.test(contentWidth) ? contentWidth : width;
             titleStyle = {
-                minWidth: contentRealWidth,
                 width: contentRealWidth
             };
         }
+        var _obj;
         return /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-title"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-title"), true), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj)),
             style: titleStyle
         }, children);
     };
     var renderRight = function() {
+        var _obj;
         return /*#__PURE__*/ React.createElement(View, {
-            className: "".concat(classPrefix, "-right"),
+            className: classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-right"), true), _define_property(_obj, "".concat(classPrefix, "-right-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-right-rtl"), rtl), _obj)),
             ref: rightRef
         }, right);
     };
@@ -160,7 +169,7 @@ export var NavBar = function(props) {
         }, renderLeft(), renderContent(), renderRight());
     };
     var _obj;
-    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-title-align-").concat(titleAlign), true), _obj));
+    var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-fixed"), fixed), _define_property(_obj, "".concat(classPrefix, "-safe-area-inset-top"), safeAreaInsetTop), _define_property(_obj, "".concat(classPrefix, "-align-").concat(titleAlign), true), _define_property(_obj, "".concat(classPrefix, "-rtl"), rtl), _obj));
     var cls = classNames(classPrefix, classes, className);
     return /*#__PURE__*/ React.createElement(React.Fragment, null, safeAreaInsetTop && /*#__PURE__*/ React.createElement(SafeArea, {
         position: "top"