@xhsreds/reds-rn-next 0.8.3 → 0.8.4-beta202510231402

package/src/components/ProgressIndicator/styles.ts

@@ -1,9 +1,10 @@
 import { alwaysColor, number } from "@xhs/reds-token-next";
 import { StyleSheet } from "react-native";
-import { useThemeColor } from "../ConfigProvider";
+import { useThemeColor, useThemeTypography } from "../ConfigProvider";
 
 const createStyles = () => {
   const themeColor = useThemeColor("ProgressIndicator");
+  const themeTypography = useThemeTypography("ProgressIndicator");
 
   const styles = StyleSheet.create({
     circleInactive: {
@@ -25,9 +26,9 @@ const createStyles = () => {
       ],
     },
     percentText: {
-      color: themeColor.Fill4,
-      fontSize: number.C2NumberFontSize,
-      lineHeight: number.C2NumberLineHeight,
+      color: themeColor.Title,
+      fontSize: themeTypography.C2FontSize,
+      textAlign: "center",
     },
   });
 

package/src/components/PullRefresh/PullRefresh.tsx

@@ -50,6 +50,33 @@ export default function PullRefresh(props: RedsPullRefresh) {
   // 下拉组件的初始top值
   const [top, setTop] = useState<number>(-1000);
 
+  // 标记是否已经执行过初始刷新
+  const [hasInitRefreshed, setHasInitRefreshed] = useState<boolean>(false);
+
+  // 执行初始刷新的方法
+  const performInitRefresh = () => {
+    if ((pullAnimHeight > 0 && !hasInitRefreshed && props.initRefresh) || props.refresh) {
+      // 设置初始状态为拉取状态
+      updatePullState(PullState.LOADING);
+
+      // 执行下拉动画
+      animatedTo(pullAnimHeight, () => {
+        setHasInitRefreshed(true);
+        setIsRefreshing(true);
+        setIsPulling(true);
+        // 触发刷新回调
+        props.onRequest && props.onRequest();
+      });
+    }
+  };
+
+  // 监听 initRefresh 属性和相关依赖变化
+  useEffect(() => {
+    if ((props.initRefresh && pullAnimHeight > 0 && !hasInitRefreshed && !isRefreshing) || props.refresh) {
+      performInitRefresh();
+    }
+  }, [props.initRefresh, pullAnimHeight, hasInitRefreshed, isRefreshing, props.refresh]);
+
   // 释放手指
   const onRelease = () => {
     // 重置偏移位置
@@ -99,10 +126,15 @@ export default function PullRefresh(props: RedsPullRefresh) {
         useNativeDriver: false,
       });
     } else {
+      // 针对初始加载优化动画参数
+      const duration =
+        !hasInitRefreshed && props.initRefresh
+          ? 1000 // 初始加载时使用固定时长
+          : Math.abs(((pan as any)._value - toValue) * 1.4);
       animation = Animated.timing(pan, {
         toValue: toValue,
         easing: Easing.bezier(0.1, 0.57, 0.1, 1),
-        duration: ((pan as any)._value - toValue) * 1.4,
+        duration: duration,
         useNativeDriver: false,
       });
     }
@@ -130,8 +162,12 @@ export default function PullRefresh(props: RedsPullRefresh) {
     }
   };
 
-  // 是否能移动手指
+  // 是否能移动手指 - 初始加载时禁用手势
   const canMove = (evt: any, gestureState: any) => {
+    // 如果正在初始刷新，禁用手势
+    if (props.initRefresh && !hasInitRefreshed) {
+      return false;
+    }
     return isPulling ? false : scrollY <= 0 && gestureState.vy > 0 && gestureState.vy > Math.abs(gestureState.vx);
   };
 
@@ -173,11 +209,11 @@ export default function PullRefresh(props: RedsPullRefresh) {
         return true;
       },
     });
-  }, [isPulling, scrollY]);
+  }, [isPulling, scrollY, props.initRefresh, hasInitRefreshed, pullAnimHeight]);
 
   // 根据外层传递参数变化进行更新执行
   useEffect(() => {
-    if (pullState === PullState.PULLING) {
+    if (pullState === PullState.PULLING && !props.initRefresh) {
       return;
     }
     // 加载中
@@ -204,13 +240,14 @@ export default function PullRefresh(props: RedsPullRefresh) {
 
       setIsRefreshing(false);
     }
-  }, [isRefreshing, props.msHoldingTime, props.isRefreshing]);
+  }, [isRefreshing, props.msHoldingTime, props.isRefreshing, pullState]);
 
   // RefreshControl组件初始化计算
   const onLayout = (evt: LayoutChangeEvent) => {
-    setPullAnimHeight(props.pullAnimHeight || evt.nativeEvent.layout.height);
-    setMinPullDistance(props.minPullDistance || pullAnimHeight);
-    setTop(-pullAnimHeight);
+    const height = props.pullAnimHeight || evt.nativeEvent.layout.height;
+    setPullAnimHeight(height);
+    setMinPullDistance(props.minPullDistance || height);
+    setTop(-height);
   };
 
   // 重写ScrollView的onScroll事件
@@ -219,6 +256,8 @@ export default function PullRefresh(props: RedsPullRefresh) {
       React.cloneElement(child, {
         // 设置滚动响应频率
         scrollEventThrottle: 1,
+        // 初始加载时禁用滚动
+        scrollEnabled: !(props.initRefresh && !hasInitRefreshed && isRefreshing),
         onScroll: (evt: any) => {
           setScrollY(evt.nativeEvent.contentOffset.y);
           // iOS下拉刷新Loading时，ScrollView向上滑动的时候，refreshControl部分同样上滑
@@ -243,7 +282,7 @@ export default function PullRefresh(props: RedsPullRefresh) {
         },
       }),
     );
-  }, [pullState, props.children]);
+  }, [pullState, props.children, props.initRefresh, hasInitRefreshed, isRefreshing, pullAnimHeight]);
 
   // 增加Animated.View控制ScrollView展示位置
   const content = useMemo(() => {

package/src/components/PullRefresh/demo/index.tsx

@@ -1,23 +1,40 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { ScrollView, View, Text, StyleSheet } from "react-native";
-import { PullRefresh } from "@xhs/reds-rn-next";
+import { PullRefresh, Button } from "@xhs/reds-rn-next";
 
 export default function PullRefreshDemo() {
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [refresh, setRefresh] = useState(false);
   return (
     <>
       <View style={styles.gap}></View>
+      <Button
+        onClick={() => {
+          setRefresh(true);
+        }}
+      >
+        点击刷新
+      </Button>
       <PullRefresh
         // type={"blue"}
         onRequest={() => {
           setIsRefreshing(true);
-          setTimeout(setIsRefreshing, 1000, false);
+          setTimeout(
+            () => {
+              setIsRefreshing(false);
+              setRefresh(false);
+            },
+            1000,
+            false,
+          );
         }}
         pullAnimHeight={56}
         minPullDistance={56}
         isRefreshing={isRefreshing}
         showText={false}
         msHoldingTime={0}
+        refresh={refresh}
+        initRefresh={true}
         style={{ backgroundColor: "yellow" }}
       >
         <View style={styles.container}>

package/src/components/PullRefresh/doc/index.mdx

@@ -24,6 +24,8 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | style                 | 容器样式               | ViewStyle       |           |
 | controlStyle          | refreshControl样式     | ViewStyle       |           |
 | showText              | 是否展示文字           | boolean         | true      |
+| initRefresh           | 是否初始刷新           | boolean         | false     |
+| refresh               | 手动点击按钮控制刷新   | boolean         | false     |
 
 ### Events
 

package/src/components/PullRefresh/interface/index.ts

@@ -13,6 +13,8 @@ export interface RedsPullRefresh {
   controlStyle?: ViewStyle;
   onRequest?: () => void;
   showText?: boolean;
+  initRefresh?: boolean;
+  refresh?: boolean;
 }
 
 export enum PullState {
@@ -31,4 +33,6 @@ export const PullRefreshDefaultProps = {
   msHoldingTime: 1000,
   isRefreshing: false,
   showText: true,
+  initRefresh: false,
+  refresh: false,
 };

package/src/components/Radio/styles.ts

@@ -43,6 +43,7 @@ export const getContainerStyle = (direction?: string | undefined, position?: "le
     alignItems: "center",
     justifyContent: "flex-start",
     backgroundColor: direction === "vertical" ? themeColor.Bg : undefined,
+    paddingHorizontal: 16,
   };
 };
 

package/src/components/Result/demo/index.tsx

@@ -44,7 +44,10 @@ export default function App() {
       ></Result>
       <Br />
       <Desc>操作按钮</Desc>
-      <Result action={<ActionButton />}></Result>
+      <Result
+        action={<ActionButton />}
+        description="我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行我是测试描述文案，尽量不超过两行"
+      ></Result>
       <Result type={"Info"} action={<ActionButton />}></Result>
       <Result type={"Warning"} action={<ActionButton />}></Result>
       <Br />

package/src/components/Search/Search.tsx

@@ -252,7 +252,7 @@ const RedsSearchComponent = forwardRef((props: RedsSearch, ref) => {
         {clearable && value.length > 0 && (
           <TouchableOpacity onPress={handleClear} onPressIn={(e) => e.preventDefault()} activeOpacity={1}>
             <Image
-              style={styles.icon}
+              style={styles.clearable}
               source={{
                 uri: "https://picasso-static.xiaohongshu.com/fe-platform/3d62a0bc90b6aca0993870867b3e33492eb339c1.png",
               }}
@@ -303,6 +303,7 @@ const RedsSearchComponent = forwardRef((props: RedsSearch, ref) => {
       ) : (
         <></>
       )}
+      {props.suffix}
     </View>
   );
 });

package/src/components/Search/demo/index.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { useThemeColor, Search, Button } from "@xhs/reds-rn-next"; // 假设这是一个自定义的 hook
+import { useThemeColor, Search, Button, Icon } from "@xhs/reds-rn-next"; // 假设这是一个自定义的 hook
 import { useState, useRef } from "react";
+import { MoreB } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const ExampleComponent = () => {
   const themeColor = useThemeColor();
-
   return (
     <View style={{ ...styles.container, backgroundColor: themeColor.Fill1 }}>
       <Text>基础用法</Text>
@@ -22,6 +22,10 @@ const ExampleComponent = () => {
         <Text>固定展示搜索按钮</Text>
         <SearchForce />
       </View>
+      <View style={{ ...styles.sectionContainer, backgroundColor: themeColor.Bg }}>
+        <Text>附加Icon</Text>
+        <SearchIcon />
+      </View>
     </View>
   );
 };
@@ -66,6 +70,52 @@ export const Basic = () => {
   );
 };
 
+export const SearchIcon = () => {
+  const themeColor = useThemeColor();
+  const [searchText, setSearchText] = useState("");
+  const ref = useRef(null);
+  const cancelClick = () => {
+    console.log("取消搜索");
+  };
+  const cameraIconClick = () => {
+    console.log("camera");
+  };
+  const searchIconClick = () => {
+    console.log("search");
+  };
+
+  return (
+    <>
+      <Search
+        modelValue={searchText}
+        placeholder="搜索"
+        onCancelClick={cancelClick}
+        onCameraIconClick={cameraIconClick}
+        onSearchIconClick={searchIconClick}
+        onSearchClick={searchIconClick}
+        onChange={(e: any) => {
+          console.log("onchange", e);
+        }}
+        ref={ref}
+        suffix={
+          <View style={{ marginLeft: 10 }}>
+            <Icon icon={MoreB} size={16} fill={themeColor.Fill5} />
+          </View>
+        }
+      />
+      <Button
+        onClick={() => {
+          setSearchText("替换modelValue");
+          // @ts-ignore
+          ref.current?.blur?.();
+        }}
+      >
+        替换modelValue
+      </Button>
+    </>
+  );
+};
+
 export const SearchButton = () => {
   const [searchText, setSearchText] = useState("xxxxx");
   const leftBackIconClick = () => {

package/src/components/Search/doc/index.mdx

@@ -33,6 +33,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | buttonText       | 自定义操作文案                                                             | string                     |          |
 | transparent      | 透明背景                                                                   | boolean                    | false    |
 | force            | 是否一定展示搜索                                                           | boolean                    | false    |
+| suffix           | suffix                                                                     | any                        |          |
 
 ### Events
 

package/src/components/Search/interface/index.ts

@@ -42,6 +42,7 @@ export interface RedsSearch {
   onSearchClick?: (value: string) => any;
   onAdditionalIconsClick?: () => any;
   onButtonTextClick?: (value: string) => any;
+  suffix?: any;
 }
 
 export const SearchDefaultProps = {

package/src/components/Search/styles.ts

@@ -35,7 +35,7 @@ const createStyles = () => {
       height: 32,
     },
     searchButtonRightText: {
-      color: themeColor.Description,
+      color: themeColor.Title,
       fontSize: typography.B1FontSize,
       lineHeight: typography.B1LineHeight,
       fontWeight: typography.B1FontWeight,
@@ -89,6 +89,11 @@ const createStyles = () => {
       width: 20,
       height: 20,
     },
+    clearable: {
+      width: 20,
+      height: 20,
+      marginRight: 5,
+    },
   });
 
   return styles;

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -3,8 +3,9 @@ import { View, Text, TouchableWithoutFeedback } from "react-native";
 import { RedsSegmentedControl, SegmentedControlDefaultProps } from "./interface/index";
 import createStyles from "./styles";
 import { useThemeColor, useThemeTypography } from "../ConfigProvider";
-
+import useMounted from "../../pvCount/useUnmountedProcess";
 const SegmentedControl = ({ value, options, onChange }: RedsSegmentedControl) => {
+  useMounted("SegmentedControl");
   const themeColor = useThemeColor();
 
   const themeTypography = useThemeTypography();

package/src/components/Sheets/AnimatedSheets.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef, useMemo, useEffect, useCallback, forwardRef, u
 import { alwaysColor } from "@xhs/reds-token-next";
 import {
   View,
-  TouchableWithoutFeedback,
+  TouchableOpacity,
   Text,
   Animated,
   LayoutChangeEvent,
@@ -11,6 +11,7 @@ import {
   Easing,
   Platform,
   StatusBar,
+  TouchableWithoutFeedback,
 } from "react-native";
 import {
   RedsSheets,
@@ -28,6 +29,7 @@ import { Icon, IconType } from "../Icon";
 import useMounted from "../../pvCount/useUnmountedProcess";
 import { useLanguage } from "../LanguageProvider";
 import { getSafeAreaInsets } from "../StatusBar";
+import { CancelM } from "@xhs/reder-icon-svg-ReDs_icon";
 
 const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
   useMounted("AnimatedSheets");
@@ -194,10 +196,8 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
     const halfScreenHeight = Math.floor(fullScreenHeight / 2);
     const threeQuaterScreenHeight = Math.floor(fullScreenHeight * 0.75);
     // 适配底部bottom
-    const windowHeight = Dimensions.get("screen").height;
     const isIos = Platform.OS === "ios";
-    const androidSafeBottom = fullScreenHeight - windowHeight - (StatusBar.currentHeight || 0);
-    const SAFE_BOTTOM = Platform.OS === "ios" ? getSafeAreaInsets().bottom : androidSafeBottom;
+    const SAFE_BOTTOM = getSafeAreaInsets().bottom;
     // 适配底部bottom
     let calculateHeight = 0;
     if (props.animatedSheetsSize === "fixed") {
@@ -230,7 +230,9 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
       childHeightRef.current = calculateHeight;
     }
     setSheetsHeight(
-      isIos ? calculateHeight : androidSafeBottom > 0 ? calculateHeight : calculateHeight - SAFE_BOTTOM || 34,
+      props.sheetsStyle?.backgroundColor === "transparent"
+        ? calculateHeight
+        : calculateHeight + (SAFE_BOTTOM || (isIos ? 34 : 20)),
     );
   }, [actionHeight, labelHeight, childHeight, props.animatedSheetsSize, props.autoSize, size, screenHeight]);
 
@@ -297,16 +299,16 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
           type === "confirm" ? handleConfirm() : handleCancel();
         }}
       >
-        <View style={[styles.iconBg, { backgroundColor: themeColor.Fill1 }]}>
+        <View style={[styles.iconBg, { backgroundColor: themeColor.Disabled }]}>
           {type === "confirm" ? (
-            <Icon icon={Close} type={IconType.iconType.image} size={20} onClick={handleConfirm} />
+            <Icon icon={CancelM} size={20} onClick={handleConfirm} fill={"rgba(255,255,255,1)"} />
           ) : (
             <Icon icon={ArrowLeft} type={IconType.iconType.image} size={20} onClick={handleCancel} />
           )}
         </View>
       </TouchableWithoutFeedback>
     ) : type === "confirm" ? (
-      <Icon icon={Close} type={IconType.iconType.image} size={20} onClick={handleConfirm} />
+      <Icon icon={CancelM} size={20} onClick={handleConfirm} fill={"rgba(0,0,0,1)"} />
     ) : (
       <Icon icon={ArrowLeft} type={IconType.iconType.image} size={20} onClick={handleCancel} />
     );
@@ -417,27 +419,46 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
         {/** normal */}
         {showLabel && !props.header ? (
           <View
-            style={[styles.labelContainer, { backgroundColor: themeColor.Bg2 }, props.headerStyle]}
+            style={[
+              props.headlerLayout === "center" ? styles.labelContainer : styles.leftLabelContainer,
+              { backgroundColor: themeColor.Bg2 },
+              props.headerStyle,
+            ]}
             onLayout={handleLabelLayout}
           >
-            {cancel ? (
-              <TouchableWithoutFeedback onPress={handleCancel}>
+            {!cancel ? (
+              props.headlerLayout === "center" ? (
+                <Block />
+              ) : (
+                <></>
+              )
+            ) : (
+              <TouchableOpacity onPress={handleCancel} activeOpacity={1}>
                 {cancelType === SheetsActionType.text ? (
-                  <View>
-                    <Text style={[styles.cancel, { color: themeColor.Title }]} testID="cancel">
-                      {cancelText || cancelKey}
-                    </Text>
-                  </View>
+                  <Text style={[styles.cancel, { color: themeColor.Title }]} testID="cancel">
+                    {cancelText || cancelKey}
+                  </Text>
                 ) : (
                   iconWrapper("cancel")
                 )}
-              </TouchableWithoutFeedback>
+              </TouchableOpacity>
+            )}
+            {label ? (
+              <Text style={[styles.label, { color: themeColor.Title }]}>
+                {label}
+                {showMask}
+              </Text>
             ) : (
-              <Block />
+              <></>
             )}
-            {label ? <Text style={[styles.label, { color: themeColor.Title }]}>{label}</Text> : <></>}
-            {close ? (
-              <TouchableWithoutFeedback onPress={handleConfirm}>
+            {!close ? (
+              props.headlerLayout === "center" ? (
+                <Block />
+              ) : (
+                <></>
+              )
+            ) : (
+              <TouchableOpacity onPress={handleConfirm} activeOpacity={1}>
                 {closeType === SheetsActionType.text ? (
                   <View>
                     <Text
@@ -454,9 +475,7 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
                 ) : (
                   iconWrapper("confirm")
                 )}
-              </TouchableWithoutFeedback>
-            ) : (
-              <Block />
+              </TouchableOpacity>
             )}
           </View>
         ) : (
@@ -503,7 +522,7 @@ const AnimatedSheets = forwardRef((props: RedsSheets, ref) => {
     </>
   );
 });
-
+// @ts-ignore
 AnimatedSheets.defaultProps = SheetsDefaultProps;
 
 export default AnimatedSheets;

package/src/components/Sheets/api.tsx

@@ -36,7 +36,7 @@ const useAnimatedSheets = (rootHostName?: string, multi: boolean = false) => {
     }
 
     animatedSheetsKey = Math.random().toString();
-
+    // @ts-ignore
     const render = () => <AnimatedSheetsContainer {...propsObject} ref={animatedRef} key={animatedSheetsKey} />;
 
     addPortal(animatedSheetsKey, render());
@@ -68,7 +68,7 @@ export const useSheets = () => {
       removePortal(sheetsKey);
     }
     sheetsKey = Math.random().toString();
-
+    // @ts-ignore
     addPortal(sheetsKey, <SheetsContainer {...propsObject} />);
   };
 

package/src/components/Sheets/demo/index.tsx

@@ -90,6 +90,7 @@ const ScrollChildren = () => {
   );
 };
 export default function App() {
+  const [visible, setVisible] = useState(false);
   const [visible1, setVisible1] = useState(false);
   const [visible2, setVisible2] = useState(false);
   const [visible3, setVisible3] = useState(false);
@@ -135,7 +136,26 @@ export default function App() {
   return (
     <View style={styles.container}>
       <ScrollView>
-        <Button onClick={() => setVisible1(true)}>显示标题与关闭按钮</Button>
+        <Button onClick={() => setVisible(true)}>显示标题与关闭按钮</Button>
+        <Portal>
+          <AnimatedSheets
+            visible={visible}
+            label={"标题"}
+            onCancel={() => setVisible(false)}
+            onConfirm={() => setVisible(false)}
+            cancel={false}
+            close={true}
+            closeType={SheetsType.SheetsActionType.icon}
+            cancelType={SheetsType.SheetsActionType.icon}
+            mask={true}
+          >
+            <Children />
+            <Button onClick={() => setShowView((val) => !val)}>测试弹窗高度变化</Button>
+            {showView ? <Text style={{ width: "100%", height: 900, backgroundColor: "#f00" }}>xxxxxxx</Text> : <></>}
+          </AnimatedSheets>
+        </Portal>
+
+        <Button onClick={() => setVisible1(true)}>左侧标题</Button>
         <Portal>
           <AnimatedSheets
             visible={visible1}
@@ -143,11 +163,11 @@ export default function App() {
             onCancel={() => setVisible1(false)}
             onConfirm={() => setVisible1(false)}
             cancel={false}
-            close={true}
+            close={false}
+            headlerLayout={"left"}
             avoidSheetsMove={true}
             closeType={SheetsType.SheetsActionType.icon}
             mask={true}
-            size={SheetsType.SheetsSize.half}
           >
             <Children />
             <Button onClick={() => setShowView((val) => !val)}>测试弹窗高度变化</Button>

package/src/components/Sheets/doc/index.mdx

@@ -10,33 +10,34 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性               | 描述                               | 类型               | 默认值                  |
-| ------------------ | ---------------------------------- | ------------------ | ----------------------- |
-| label              | 标题                               | string             |                         |
-| mask               | 是否展示遮罩层                     | boolean            | true                    |
-| maskMode           | 背景颜色类型                       | SheetsMaskMode     | SheetsMaskMode.light    |
-| sheetsType         | sheets类型                         | SheetsType         | SheetsType.normal       |
-| cancel             | 返回按钮                           | boolean            | true                    |
-| close              | 关闭按钮                           | boolean            | true                    |
-| zIndex             | 容器层级                           | number             | 0                       |
-| cancelType         | 返回按钮类型                       | SheetsActionType   | SheetsActionType.icon   |
-| closeType          | 确定按钮类型                       | SheetsActionType   | SheetsActionType.icon   |
-| cancelText         | 取消操作文案                       | string             |                         |
-| closeText          | 确定操作文案                       | string             |                         |
-| iconType           | icon 类型                          | SheetsIconType     | SheetsIconType.normal   |
-| size               | size                               | SheetsSize         | SheetsSize.auto         |
-| children           | sheets内容                         | ReactNode          |                         |
-| maskStyle          | mask style                         | ViewStyle          | `{}`                    |
-| sheetsStyle        | sheets style                       | ViewStyle          | `{}`                    |
-| headerStyle        | header样式                         | ViewStyle          | `{}`                    |
-| autoSize           | 高度                               | number             |                         |
-| header             | 自定义header                       | ReactNode          |                         |
-| animatedSheetsSize | AnimatedSheets是否是固定高度       | AnimatedSheetsSize | AnimatedSheetsSize.auto |
-| isMaskClose        | 点击弹层回调                       | boolean            | true                    |
-| visible            | 是否展示sheets                     | boolean            | false                   |
-| onImmediateCancel  | 点击关闭弹窗立即执行               | () => void         | () => {}                |
-| onImmediateConfirm | 点击确定弹窗立即执行               | () => void         | () => {}                |
-| avoidSheetsMove    | 安卓上是否阻止键盘弹出弹窗位置上移 | boolean            | false                   |
+| 属性               | 描述                               | 类型                   | 默认值                  |
+| ------------------ | ---------------------------------- | ---------------------- | ----------------------- |
+| label              | 标题                               | string                 |                         |
+| mask               | 是否展示遮罩层                     | boolean                | true                    |
+| maskMode           | 背景颜色类型                       | SheetsMaskMode         | SheetsMaskMode.light    |
+| sheetsType         | sheets类型                         | SheetsType             | SheetsType.normal       |
+| cancel             | 返回按钮                           | boolean                | true                    |
+| close              | 关闭按钮                           | boolean                | true                    |
+| zIndex             | 容器层级                           | number                 | 0                       |
+| cancelType         | 返回按钮类型                       | SheetsActionType       | SheetsActionType.icon   |
+| closeType          | 确定按钮类型                       | SheetsActionType       | SheetsActionType.icon   |
+| cancelText         | 取消操作文案                       | string                 |                         |
+| closeText          | 确定操作文案                       | string                 |                         |
+| iconType           | icon 类型                          | SheetsIconType         | SheetsIconType.normal   |
+| size               | size                               | SheetsSize             | SheetsSize.auto         |
+| children           | sheets内容                         | ReactNode              |                         |
+| maskStyle          | mask style                         | ViewStyle              | `{}`                    |
+| sheetsStyle        | sheets style                       | ViewStyle              | `{}`                    |
+| headerStyle        | header样式                         | ViewStyle              | `{}`                    |
+| autoSize           | 高度                               | number                 |                         |
+| header             | 自定义header                       | ReactNode              |                         |
+| animatedSheetsSize | AnimatedSheets是否是固定高度       | AnimatedSheetsSize     | AnimatedSheetsSize.auto |
+| isMaskClose        | 点击弹层回调                       | boolean                | true                    |
+| visible            | 是否展示sheets                     | boolean                | false                   |
+| onImmediateCancel  | 点击关闭弹窗立即执行               | () => void             | () => {}                |
+| onImmediateConfirm | 点击确定弹窗立即执行               | () => void             | () => {}                |
+| avoidSheetsMove    | 安卓上是否阻止键盘弹出弹窗位置上移 | boolean                | false                   |
+| headlerLayout      | headlerLayout                      | "center" | "left" | center                  |
 
 ### Events