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

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

@@ -2,70 +2,18 @@ import React, { ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
 import type { CalendarCardDay, CalendarCardMonth, CalendarCardRef, CalendarCardValue } from './types';
 export interface CalendarCardProps extends BasicComponent {
-    /**
-    * 类型，单个日期 single，多个日期 multiple，日期范围 range，周选择 week
-    * @default single
-    */
-    type: 'single' | 'multiple' | 'range' | 'week'
-    /**
-    * 受控模式下的值，与 onChange 搭配使用
-    * @default -
-    */
-    value?: CalendarCardValue
-    /**
-    * 默认值，单个日期 Date 格式，多个日期/范围选择 Date[] 格式
-    * @default -
-    */
-    defaultValue?: CalendarCardValue
-    /**
-    * 设置周起始日，0 为周日，1 为周一
-    * @default 1
-    */
-    firstDayOfWeek?: number
-    /**
-    * 限制范围开始日期
-    * @default -
-    */
-    startDate?: Date
-    /**
-    * 限制范围结束日期
-    * @default -
-    */
-    endDate?: Date
-    /**
-    * 设置不可选日期
-    * @default -
-    */
-    disableDay?: (day: CalendarCardDay) => boolean
-    /**
-    * 日期信息
-    * @default -
-    */
-    renderDay?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 日期顶部信息
-    * @default -
-    */
-    renderDayTop?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 日期底部信息
-    * @default -
-    */
-    renderDayBottom?: (day: CalendarCardDay) => ReactNode
-    /**
-    * 点击后触发
-    * @default -
-    */
-    onDayClick?: (day: CalendarCardDay) => void
-    /**
-    * 切换月份时触发
-    * @default -
-    */
-    onPageChange: (data: CalendarCardMonth) => void
-    /**
-    * 选择值发生变化时触发
-    * @default -
-    */
-    onChange: (value: CalendarCardValue) => void
+    type: 'single' | 'multiple' | 'range' | 'week';
+    value?: CalendarCardValue;
+    defaultValue?: CalendarCardValue;
+    firstDayOfWeek?: number;
+    startDate?: Date;
+    endDate?: Date;
+    disableDay?: (day: CalendarCardDay) => boolean;
+    renderDay?: (day: CalendarCardDay) => ReactNode;
+    renderDayTop?: (day: CalendarCardDay) => ReactNode;
+    renderDayBottom?: (day: CalendarCardDay) => ReactNode;
+    onDayClick?: (day: CalendarCardDay) => void;
+    onPageChange: (data: CalendarCardMonth) => void;
+    onChange: (value: CalendarCardValue) => void;
 }
 export declare const CalendarCard: React.ForwardRefExoticComponent<Partial<CalendarCardProps> & React.RefAttributes<CalendarCardRef>>;

package/dist/es/packages/calendarcard/calendarcard.js

@@ -2,7 +2,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
-import React, { useState, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import classNames from "classnames";
 import { View } from "@tarojs/components";
 import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from "./icon";
@@ -71,7 +71,7 @@ export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             onChange === null || onChange === void 0 ? void 0 : onChange(val);
         }
     };
-    var getDays = function(month) {
+    var getDays = useCallback(function(month) {
         var y = month.year;
         var m = month.month;
         var days = _to_consumable_array(getPrevMonthDays(y, m, firstDayOfWeek)).concat(_to_consumable_array(getCurrentMonthDays(y, m)));
@@ -88,13 +88,18 @@ export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
             });
         }
         return days;
-    };
+    }, [
+        firstDayOfWeek
+    ]);
     useEffect(function() {
         var newDays = getDays(month);
         setDays(newDays);
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(month);
     }, [
-        month
+        month,
+        getDays,
+        onPageChange,
+        firstDayOfWeek
     ]);
     var isSameDay = function(day1, day2) {
         return (day1 === null || day1 === void 0 ? void 0 : day1.year) === (day2 === null || day2 === void 0 ? void 0 : day2.year) && (day1 === null || day1 === void 0 ? void 0 : day1.month) === (day2 === null || day2 === void 0 ? void 0 : day2.month) && (day1 === null || day1 === void 0 ? void 0 : day1.date) === (day2 === null || day2 === void 0 ? void 0 : day2.date);

package/dist/es/packages/calendarcard/icon.js

@@ -1,17 +1,29 @@
 import React from "react";
-import { View } from "@tarojs/components";
+import { Image, View } from "@tarojs/components";
 var left = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNi42MDUgOS40OWEuNzcxLjc3MSAwIDAgMSAwLS45OGwzLjYtNC4zNzJhLjc3MS43NzEgMCAwIDEgMS4xOS45ODFMOC4yIDlsMy4xOTcgMy44ODFhLjc3MS43NzEgMCAxIDEtMS4xOTEuOThsLTMuNi00LjM3eiIvPjwvc3ZnPg==';
 var right = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTEuMzk2IDkuNDlhLjc3MS43NzEgMCAwIDAgMC0uOThsLTMuNi00LjM3MmEuNzcxLjc3MSAwIDAgMC0xLjE5MS45ODFMOS44IDlsLTMuMTk2IDMuODgxYS43NzEuNzcxIDAgMCAwIDEuMTkuOThsMy42LTQuMzd6Ii8+PC9zdmc+';
 var doubleLeft = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTMuODUzIDQuMDI2YS43NzEuNzcxIDAgMCAxIC4xMiAxLjA4NUwxMC44NjQgOWwzLjExIDMuODg5YS43NzEuNzcxIDAgMSAxLTEuMjA0Ljk2M2wtMy40OTgtNC4zN2EuNzcxLjc3MSAwIDAgMSAwLS45NjRsMy40OTctNC4zNzFhLjc3MS43NzEgMCAwIDEgMS4wODQtLjEyem0tNS4yNDUgMGEuNzcxLjc3MSAwIDAgMSAuMTIgMS4wODVMNS42MTcgOWwzLjExMSAzLjg4OWEuNzcxLjc3MSAwIDAgMS0xLjIwNS45NjNsLTMuNDk3LTQuMzdhLjc3MS43NzEgMCAwIDEgMC0uOTY0bDMuNDk3LTQuMzcxYS43NzEuNzcxIDAgMCAxIDEuMDg1LS4xMnoiLz48L3N2Zz4=';
 var doubleRight = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNNC4xNDcgMTMuOTc0YS43NzEuNzcxIDAgMCAxLS4xMi0xLjA4NUw3LjEzNiA5IDQuMDI4IDUuMTFhLjc3MS43NzEgMCAxIDEgMS4yMDQtLjk2M2wzLjQ5NyA0LjM3MWEuNzcxLjc3MSAwIDAgMSAwIC45NjRsLTMuNDk3IDQuMzcxYS43NzEuNzcxIDAgMCAxLTEuMDg0LjEyem01LjI0NSAwYS43NzEuNzcxIDAgMCAxLS4xMi0xLjA4NUwxMi4zODMgOSA5LjI3MiA1LjExYS43NzEuNzcxIDAgMSAxIDEuMjA1LS45NjNsMy40OTcgNC4zNzFhLjc3MS43NzEgMCAwIDEgMCAuOTY0bC0zLjQ5NyA0LjM3MWEuNzcxLjc3MSAwIDAgMS0xLjA4NS4xMnoiLz48L3N2Zz4=';
+if (process.env.TARO_ENV === 'jdharmony_cpp') {
+    left = 'https://img11.360buyimg.com/imagetools/jfs/t1/187031/35/51586/196/6731c464F9b9f8f00/5506e32bf15e29dc.png';
+    right = 'https://img12.360buyimg.com/imagetools/jfs/t1/181006/25/51824/185/6731c452F9e252322/7493147dd6b4a88d.png';
+    doubleLeft = 'https://img13.360buyimg.com/imagetools/jfs/t1/221244/29/45876/259/6731c6bdF515df0a2/624e8eee3c8494a2.png';
+    doubleRight = 'https://img11.360buyimg.com/imagetools/jfs/t1/238382/25/24000/235/6731c6bdF0153286c/4a57e60b6e889af3.png';
+}
 var Icon = function(param) {
     var url = param.url;
     var style = {
         background: "url('".concat(url, "') no-repeat center"),
         backgroundSize: '100% 100%',
-        width: '18px',
-        height: '18px'
+        width: 18,
+        height: 18
     };
+    if (process.env.TARO_ENV === 'jdharmony_cpp') {
+        return /*#__PURE__*/ React.createElement(Image, {
+            src: url,
+            style: style
+        });
+    }
     return /*#__PURE__*/ React.createElement(View, {
         style: style
     });

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

@@ -55,6 +55,9 @@
 
     &-top,
     &-bottom {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 12px;
       font-size: 12px;
@@ -67,14 +70,22 @@
 
     &.active {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
       border-radius: $calendar-day-active-border-radius;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start,
     &.end {
       background-color: $calendar-active-background-color;
-      color: $color-primary-text;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $color-primary-text;
+      }
     }
 
     &.start {
@@ -89,7 +100,11 @@
 
     &.mid {
       background-color: $calendar-choose-background-color;
-      color: $calendar-choose-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-choose-color;
+      }
     }
 
     .nut-calendar-day-info {
@@ -100,7 +115,11 @@
     &.prev,
     &.next,
     &.disabled {
-      color: $calendar-disable-color;
+      .nut-calendarcard-day-top,
+      .nut-calendarcard-day-inner,
+      .nut-calendarcard-day-bottom {
+        color: $calendar-disable-color;
+      }
       cursor: not-allowed;
     }
   }
@@ -128,11 +147,13 @@
       }
     }
   }
+
   &-day {
     &.start,
     &.end {
       border-radius: 0;
     }
+
     &.start {
       border-top-right-radius: $calendar-day-active-border-radius;
       border-bottom-right-radius: $calendar-day-active-border-radius;

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

@@ -47,6 +47,9 @@
   cursor: auto;
 }
 .nut-calendarcard-day-top, .nut-calendarcard-day-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 12px;
   font-size: 12px;
@@ -57,11 +60,21 @@
 }
 .nut-calendarcard-day.active {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
-  color: var(--nutui-color-primary-text, #ffffff);
   border-radius: var(--nutui-calendar-day-active-border-radius, 4px);
 }
+.nut-calendarcard-day.active .nut-calendarcard-day-top,
+.nut-calendarcard-day.active .nut-calendarcard-day-inner,
+.nut-calendarcard-day.active .nut-calendarcard-day-bottom {
+  color: var(--nutui-color-primary-text, #ffffff);
+}
 .nut-calendarcard-day.start, .nut-calendarcard-day.end {
   background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-calendarcard-day.start .nut-calendarcard-day-top,
+.nut-calendarcard-day.start .nut-calendarcard-day-inner,
+.nut-calendarcard-day.start .nut-calendarcard-day-bottom, .nut-calendarcard-day.end .nut-calendarcard-day-top,
+.nut-calendarcard-day.end .nut-calendarcard-day-inner,
+.nut-calendarcard-day.end .nut-calendarcard-day-bottom {
   color: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-calendarcard-day.start {
@@ -74,15 +87,27 @@
 }
 .nut-calendarcard-day.mid {
   background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1));
+}
+.nut-calendarcard-day.mid .nut-calendarcard-day-top,
+.nut-calendarcard-day.mid .nut-calendarcard-day-inner,
+.nut-calendarcard-day.mid .nut-calendarcard-day-bottom {
   color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-calendarcard-day .nut-calendar-day-info {
   color: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-calendarcard-day.prev, .nut-calendarcard-day.next, .nut-calendarcard-day.disabled {
-  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
   cursor: not-allowed;
 }
+.nut-calendarcard-day.prev .nut-calendarcard-day-top,
+.nut-calendarcard-day.prev .nut-calendarcard-day-inner,
+.nut-calendarcard-day.prev .nut-calendarcard-day-bottom, .nut-calendarcard-day.next .nut-calendarcard-day-top,
+.nut-calendarcard-day.next .nut-calendarcard-day-inner,
+.nut-calendarcard-day.next .nut-calendarcard-day-bottom, .nut-calendarcard-day.disabled .nut-calendarcard-day-top,
+.nut-calendarcard-day.disabled .nut-calendarcard-day-inner,
+.nut-calendarcard-day.disabled .nut-calendarcard-day-bottom {
+  color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 
 [dir=rtl] .nut-calendarcard-header-left .left, [dir=rtl] .nut-calendarcard-header-right .left,
 .nut-rtl .nut-calendarcard-header-left .left,

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/input/style/style.harmony.css

@@ -43,4 +43,8 @@
   background: none;
   opacity: 1;
   -webkit-text-fill-color: #c2c4cc;
+}
+
+.nut-input-clear {
+  flex: 0;
 }

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"

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

@@ -2,6 +2,8 @@
   width: $navbar-width;
   position: relative;
   display: flex;
+  flex-direction: row;
+  justify-content: center;
   align-items: center;
   height: $navbar-height;
   box-sizing: border-box;
@@ -16,6 +18,7 @@
     position: fixed;
     top: 0;
     left: 0;
+    right: 0;
     width: 100%;
   }
 
@@ -24,27 +27,32 @@
     width: 100%;
   }
 
+  &-safe-area-inset-top {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+  }
+
+  &-align-left {
+    padding-left: 14px;
+  }
+
   &-title {
-    min-width: 53%;
-    margin: 0 auto;
+    width: 50%;
+    height: 100%;
     text-align: center;
     display: flex;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
     font-size: $navbar-title-font-size;
     font-weight: $navbar-title-font-weight;
     color: $navbar-title-font-color;
-
-    .nut-tabs-titles {
-      background: transparent;
-
-      &-item-text {
-        color: $color-title;
-      }
-    }
-
-    .nut-tabpane {
-      display: none;
+    &-align-left {
+      min-width: 0;
+      flex: 1;
+      justify-content: flex-start;
+      padding: 0 8px;
+      text-align: left;
     }
   }
 
@@ -59,125 +67,62 @@
     bottom: 0;
     display: flex;
     align-items: center;
+    flex-direction: row;
+    height: 100%;
     cursor: pointer;
     padding: 0 14px;
-
+    /* #ifndef rn harmony jd h5 weapp*/
     .nut-icon,
     .nutui-iconfont {
       width: 20px;
       height: 20px;
       font-size: 20px;
     }
+    /* #endif */
   }
 
   &-left {
     left: 0;
+    &-rtl {
+      left: auto;
+      right: 0;
+    }
+    &-align-left {
+      position: static;
+      padding: 0;
+    }
 
     &-back {
       display: flex;
+      flex-direction: row;
       align-items: center;
       justify-content: center;
-      margin-right: 10px;
+      &-children {
+        margin-right: 10px;
+        &-rtl {
+          margin-right: 0;
+          margin-left: 10px;
+        }
+      }
     }
   }
 
   &-right {
     right: 0;
-
-    .nut-icon {
-      margin-left: 12px;
-
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
-
-  &-title-align-left {
-    padding-left: 14px;
-
-    .nut-navbar-left {
-      position: static;
-      padding: 0;
-
-      .nut-icon {
-        margin-left: 12px;
-
-        &:first-child {
-          margin-left: 0;
-        }
-      }
+    &-rtl {
+      right: auto;
+      left: 0;
     }
-    .nut-navbar-right {
+    &-align-left {
       position: static;
       display: inline-flex;
       white-space: nowrap;
       padding-left: 0;
     }
-    .nut-navbar-left-back {
-      margin-right: 0;
-    }
-
-    .nut-navbar-title {
-      min-width: 0;
-      margin: 0;
-      flex: 1;
-      justify-content: flex-start;
-      padding: 0 8px;
-      text-align: left;
-    }
   }
-}
-
-[dir='rtl'] .nut-navbar,
-.nut-rtl .nut-navbar {
-  &-fixed {
-    left: auto;
-    right: 0;
-  }
-
-  &-left {
-    left: auto;
-    right: 0;
+  &-rtl {
     .nut-icon-ArrowLeft {
       transform: rotateY(180deg);
     }
-    &-back {
-      margin-right: 0;
-      margin-left: 10px;
-    }
-  }
-
-  &-right {
-    right: auto;
-    left: 0;
-    .nut-icon {
-      margin-left: 0;
-      margin-right: 12px;
-
-      &:first-child {
-        margin-left: 0;
-        margin-right: 0;
-      }
-    }
-  }
-
-  &-title-align-left {
-    .nut-navbar-left {
-      .nut-icon-ArrowLeft {
-        margin-left: 0;
-        margin-right: 12px;
-
-        &:first-child {
-          margin-left: 0;
-          margin-right: 0;
-        }
-      }
-    }
-
-    .nut-navbar-left-back {
-      margin-right: 0;
-      margin-left: 0;
-    }
   }
 }