@xhsreds/reds-rn-next 0.8.4-image-optimization202510222117 → 0.9.1-beta202510271511

package/src/components/CheckBoxGroup/CheckBoxGroup.tsx

@@ -107,52 +107,61 @@ const CheckBoxGroup = (props: RedsCheckBoxGroup) => {
     <CheckBoxGroupContext.Provider value={{ checkList: props.value || [] }}>
       {props.full ? (
         <View style={[styles.fullContainer, props.fullContainerStyle]}>
-          <TouchableWithoutFeedback onPress={handleFullClick}>
-            <View style={styles.flexRow}>
-              {checkStatus !== CheckedStatus.HALF ? (
-                <View style={getFullIconStyle(checkStatus, props, themeColor)}>
-                  {checkStatus === CheckedStatus.FULL ? (
-                    <TouchableOpacity onPress={handleFullClick} activeOpacity={1}>
-                      <Image
-                        source={{
-                          uri: "https://picasso-static.xiaohongshu.com/fe-platform/9d9ae3689964820b64f21c4cd14fcc8f089a5403.png",
-                        }}
-                        style={{ width: iconSizeMap[props.size!], height: iconSizeMap[props.size!] }}
-                      />
-                    </TouchableOpacity>
-                  ) : (
-                    <></>
-                  )}
-                </View>
-              ) : (
-                <TouchableOpacity onPress={handleFullClick} activeOpacity={1}>
-                  <Image
-                    source={{
-                      uri: "https://picasso-static.xiaohongshu.com/fe-platform/dc008804e8b5f2064cc179cdbed221ef9fcbbc66.png",
-                    }}
-                    style={{
-                      // @ts-ignore
-                      height: iconSizeMap[props?.size],
-                      // @ts-ignore
-                      width: iconSizeMap[props.size],
-                      marginRight: 6,
-                    }}
-                  />
-                </TouchableOpacity>
-              )}
-            </View>
-          </TouchableWithoutFeedback>
-          <Text style={styles.text}>{props.fullText || selectAllKey}</Text>
+          <View style={styles.flexStart}>
+            <TouchableWithoutFeedback onPress={handleFullClick}>
+              <View style={styles.flexRow}>
+                {checkStatus !== CheckedStatus.HALF ? (
+                  <View style={getFullIconStyle(checkStatus, props, themeColor)}>
+                    {checkStatus === CheckedStatus.FULL ? (
+                      <TouchableOpacity onPress={handleFullClick} activeOpacity={1}>
+                        <Image
+                          source={{
+                            uri: "https://picasso-static.xiaohongshu.com/fe-platform/9d9ae3689964820b64f21c4cd14fcc8f089a5403.png",
+                          }}
+                          style={{ width: iconSizeMap[props.size!], height: iconSizeMap[props.size!] }}
+                        />
+                      </TouchableOpacity>
+                    ) : (
+                      <></>
+                    )}
+                  </View>
+                ) : (
+                  <TouchableOpacity onPress={handleFullClick} activeOpacity={1}>
+                    <Image
+                      source={{
+                        uri: "https://picasso-static.xiaohongshu.com/fe-platform/dc008804e8b5f2064cc179cdbed221ef9fcbbc66.png",
+                      }}
+                      style={{
+                        // @ts-ignore
+                        height: iconSizeMap[props?.size],
+                        // @ts-ignore
+                        width: iconSizeMap[props.size],
+                        marginRight: 6,
+                      }}
+                    />
+                  </TouchableOpacity>
+                )}
+              </View>
+            </TouchableWithoutFeedback>
+            <Text style={styles.text}>{props.fullText || selectAllKey}</Text>
+          </View>
           <TouchableOpacity
             activeOpacity={1}
             onPress={() => {
               setFolderOpen((open) => !open);
             }}
           >
-            <Image
-              source={{ uri: arrowIcon }}
-              style={{ width: iconSizeMap[props.size!], height: iconSizeMap[props.size!] }}
-            />
+            <View style={{ display: "flex", flexDirection: "row", alignItems: "center" }}>
+              {props.value?.length ? (
+                <Text style={{ color: themeColor.Description }}>{props.value.length}</Text>
+              ) : (
+                <></>
+              )}
+              <Image
+                source={{ uri: arrowIcon }}
+                style={{ width: iconSizeMap[props.size!], height: iconSizeMap[props.size!] }}
+              />
+            </View>
           </TouchableOpacity>
         </View>
       ) : (

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

@@ -88,7 +88,7 @@ export default function App() {
         <CheckBox label="多选" value={2} />
       </CheckBoxGroup>
 
-      <Text>竖向 居右 有全选按钮</Text>
+      <Text>竖向 居左 有全选按钮</Text>
       <CheckBoxGroup
         onChange={handleChange}
         value={value}
@@ -96,35 +96,37 @@ export default function App() {
         fullText="全选按钮"
         layout={CheckBoxGroupType.CheckBoxGroupLayout.VERTICAL}
       >
-        <CheckBox label="多选" value={1} />
-        <CheckBox label="多选" value={2} />
+        <CheckBox label="多选" value={1} placement={CheckBoxGroupType.CheckBoxPlacement.LEFT} />
+        <CheckBox label="多选" value={2} placement={CheckBoxGroupType.CheckBoxPlacement.LEFT} />
       </CheckBoxGroup>
 
-      <Text>竖向 居右 有全选按钮</Text>
+      <Text>竖向 居左 有全选按钮</Text>
       <CheckBoxGroup
         onChange={handleChange}
         value={value}
         full={true}
         fullText="全选按钮"
         layout={CheckBoxGroupType.CheckBoxGroupLayout.VERTICAL}
+        placement={CheckBoxGroupType.CheckBoxPlacement.LEFT}
         checkboxStyle={{ paddingLeft: 0 }}
       >
-        <CheckBox label="多选" value={1} />
-        <CheckBox label="多选" value={2} />
+        <CheckBox label="多选" value={1} placement={CheckBoxGroupType.CheckBoxPlacement.LEFT} />
+        <CheckBox label="多选" value={2} placement={CheckBoxGroupType.CheckBoxPlacement.LEFT} />
       </CheckBoxGroup>
 
-      <Text>竖向 居右 有全选按钮 size small</Text>
+      <Text>竖向 居左 有全选按钮 size small</Text>
       <CheckBoxGroup
         onChange={handleChange}
         value={value}
         full={true}
+        placement={CheckBoxGroupType.CheckBoxPlacement.LEFT}
         fullText="全选按钮"
         size={CheckBoxGroupType.CheckBoxGroupSize.SMALL}
         layout={CheckBoxGroupType.CheckBoxGroupLayout.VERTICAL}
         checkboxStyle={{ paddingLeft: 0 }}
       >
-        <CheckBox label="多选" value={1} />
-        <CheckBox label="多选" value={2} />
+        <CheckBox label="多选" value={1} placement={CheckBoxGroupType.CheckBoxPlacement.LEFT} />
+        <CheckBox label="多选" value={2} placement={CheckBoxGroupType.CheckBoxPlacement.LEFT} />
       </CheckBoxGroup>
     </ScrollView>
   );

package/src/components/CheckBoxGroup/styles.ts

@@ -241,4 +241,10 @@ export const getStyles = (themeColor: any) =>
       flexDirection: "row",
       alignItems: "center",
     },
+    flexStart: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-start",
+    },
   });

package/src/components/Collapse/Collapse.tsx

@@ -17,6 +17,29 @@ const Collapse = (props: RedsCollapse) => {
   } as RedsCollapse;
   const activeValueInnel = useRef<Array<string | number>>([]);
   const [accordionActiveValueInnel, setAccordionActiveValueInnel] = useState<string | number>("");
+
+  const registeredChildren = useRef<any[]>([]);
+
+  const registerChild = (child: any) => {
+    registeredChildren.current.push(child);
+    updateLines();
+  };
+
+  const unregisterChild = (child: any) => {
+    registeredChildren.current = registeredChildren.current.filter((registeredChild) => registeredChild !== child);
+    updateLines();
+  };
+
+  const updateLines = () => {
+    registeredChildren.current.forEach((child, index) => {
+      child.setLine(index < registeredChildren.current.length - 1);
+    });
+  };
+
+  useEffect(() => {
+    updateLines();
+  }, [registeredChildren.current]);
+
   // 新增某个 active key
   const addActiveValue = useCallback(
     (key: string | number) => {
@@ -63,7 +86,10 @@ const Collapse = (props: RedsCollapse) => {
   }, [activeValueInnel, onChange]);
 
   return (
-    <CollapseContext.Provider value={{ addActiveValue, removeActiveValue, isActiveValue, size }}>
+    // @ts-ignore
+    <CollapseContext.Provider
+      value={{ addActiveValue, removeActiveValue, isActiveValue, size, registerChild, unregisterChild }}
+    >
       {children}
     </CollapseContext.Provider>
   );

package/src/components/Collapse/Item/Item.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useMemo } from "react";
 import {
   View,
   Text,
@@ -10,14 +10,18 @@ import {
 } from "react-native";
 import { IItem, ItemDefaultProps } from "./interface/index";
 import createStyles from "./styles";
+import { Icon } from "../../Icon";
+import { ArrowUpM, ArrowDownCenterB } from "@xhs/reder-icon-svg-ReDs_icon";
 import { CollapseContext } from "../hooks/useCollapseContext";
+import { useThemeColor } from "../../ConfigProvider";
 
 if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
 const Item = ({ value, title, lazyRender, children, onClick }: IItem) => {
-  const { addActiveValue, isActiveValue, removeActiveValue, size } = React.useContext(CollapseContext);
+  const { addActiveValue, isActiveValue, removeActiveValue, size, registerChild, unregisterChild } =
+    React.useContext(CollapseContext);
   const styles = createStyles(size || "Medium");
   const [visible, setVisible] = useState(false);
   const [shouldMount, setShouldMount] = useState(!lazyRender);
@@ -25,6 +29,19 @@ const Item = ({ value, title, lazyRender, children, onClick }: IItem) => {
   const firstRender = useRef(false);
   const measureRef = useRef<View>(null);
 
+  const themeColor = useThemeColor();
+
+  const [lineItem, setLineItem] = useState(false);
+
+  const childInfo = {
+    setLine: (value: boolean) => setLineItem(value),
+  };
+
+  useEffect(() => {
+    registerChild(childInfo);
+    return () => unregisterChild(childInfo);
+  }, []);
+
   // 新增状态：标记是否完成首次高度测量
   const [initialMeasureDone, setInitialMeasureDone] = useState(false);
 
@@ -84,11 +101,25 @@ const Item = ({ value, title, lazyRender, children, onClick }: IItem) => {
     onClick?.(value);
   };
 
+  const cloneChildren = useMemo(() => {
+    return React.Children.map(children, (child: any) => {
+      return React.cloneElement(child, {
+        style: { color: themeColor.Paragraph },
+        ...child.props,
+      });
+    });
+  }, [children]);
+
   return (
     <View>
       <TouchableWithoutFeedback onPress={onPress}>
         <View style={styles.header}>
           <Text style={styles.title}>{title}</Text>
+          {visible ? (
+            <Icon icon={ArrowUpM} size={16} fill={themeColor.Title} />
+          ) : (
+            <Icon icon={ArrowDownCenterB} size={16} fill={themeColor.Title} />
+          )}
         </View>
       </TouchableWithoutFeedback>
 
@@ -99,26 +130,43 @@ const Item = ({ value, title, lazyRender, children, onClick }: IItem) => {
         style={{
           position: "absolute",
           opacity: 0,
+          paddingHorizontal: 16,
+          paddingBottom: 12,
           top: -9999,
           width: "100%", // 确保测量视图宽度与实际一致
+          ...styles.content,
         }}
       >
-        {children}
+        {cloneChildren}
       </View>
-
       {/* 实际内容渲染 */}
       {shouldMount && initialMeasureDone && (
         <View
           style={{
             overflow: "hidden",
             height: visible ? contentHeight : 0,
+            paddingHorizontal: 16,
+            paddingBottom: 12,
             // 添加最小高度避免小内容闪烁
             minHeight: visible ? 1 : 0,
+            ...styles.content,
           }}
         >
-          {children}
+          {cloneChildren}
         </View>
       )}
+      {/** 分割线 */}
+      {lineItem ? (
+        <View
+          style={{
+            backgroundColor: themeColor.Separator,
+            height: 0.5,
+            marginHorizontal: 16,
+          }}
+        ></View>
+      ) : (
+        <></>
+      )}
     </View>
   );
 };

package/src/components/Collapse/Item/styles.ts

@@ -4,22 +4,28 @@ import { useThemeColor, useThemeTypography } from "../../ConfigProvider/hooks/th
 const createStyles = (size: string) => {
   const themeColor = useThemeColor("Collapse");
   const typography = useThemeTypography("Collapse");
+  const titleFontSize = {
+    Large: typography.B1FontSize,
+    Medium: typography.B2FontSize,
+    Small: typography.C2FontSize,
+  };
   return StyleSheet.create({
     header: {
       paddingVertical: size === "Large" ? 12 : 10,
       paddingHorizontal: 16,
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
     },
     title: {
       color: themeColor.Title,
-      fontSize: typography.B1FontSize,
+      fontSize: titleFontSize[size as "Large" | "Medium" | "Small"],
       fontWeight: typography.B1FontWeight,
       lineHeight: typography.B1LineHeight,
     },
     content: {
-      paddingTop: 0,
-      paddingBottom: 12,
-      paddingLeft: 16,
-      paddingRight: 16,
+      fontSize: typography.C2FontSize,
     },
   });
 };

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

@@ -1,13 +1,15 @@
 import React from "react";
 import { View, Text } from "react-native";
-import { Collapse, CollapseItem } from "@xhs/reds-rn-next";
+import { Collapse, CollapseItem, useThemeColor } from "@xhs/reds-rn-next";
 
 const Desc = ({ children = "" }) => {
-  return <Text>{children}</Text>;
+  const themeColor = useThemeColor();
+  return <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>{children}</Text>;
 };
 const Br = (props: { height?: number }) => <View style={{ height: props.height || 20 }}></View>;
 
 export default function App() {
+  const themeColor = useThemeColor();
   const handleClick = (value: string | number) => {
     console.log("Collapse clicked", value);
   };
@@ -20,38 +22,114 @@ export default function App() {
   return (
     <View>
       <Desc>基础用法</Desc>
+      <Collapse onChange={handleChange} size={"Small"}>
+        <CollapseItem title="标题1" value={"1"} onClick={handleClick}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+        <CollapseItem title="标题2" value={"2"}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+      </Collapse>
+      <Br />
       <Collapse onChange={handleChange}>
         <CollapseItem title="标题1" value={"1"} onClick={handleClick}>
-          <Text>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+        <CollapseItem title="标题2" value={"2"}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+      </Collapse>
+      <Br />
+      <Collapse onChange={handleChange} size={"Large"}>
+        <CollapseItem title="标题1" value={"1"} onClick={handleClick}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
             测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
           </Text>
         </CollapseItem>
         <CollapseItem title="标题2" value={"2"}>
-          <Text>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
             测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
           </Text>
         </CollapseItem>
       </Collapse>
       <Br />
       <Desc>手风琴模式</Desc>
+      <Collapse accordion size={"Small"}>
+        <CollapseItem title="标题3" value={"3"}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+        <CollapseItem title="标题4" value={"4"}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>测试数据测试数据测试数据测试数据测试数据</Text>
+        </CollapseItem>
+      </Collapse>
+      <Br />
       <Collapse accordion>
         <CollapseItem title="标题3" value={"3"}>
-          <Text>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
             测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
           </Text>
         </CollapseItem>
         <CollapseItem title="标题4" value={"4"}>
-          <Text>测试数据测试数据测试数据测试数据测试数据</Text>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>测试数据测试数据测试数据测试数据测试数据</Text>
+        </CollapseItem>
+      </Collapse>
+      <Br />
+      <Collapse accordion size={"Large"}>
+        <CollapseItem title="标题3" value={"3"}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+        <CollapseItem title="标题4" value={"4"}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>测试数据测试数据测试数据测试数据测试数据</Text>
         </CollapseItem>
       </Collapse>
       <Br />
       <Desc>懒加载</Desc>
+      <Collapse activeValue={["3"]} size="Small">
+        <CollapseItem title="标题5" value={"5"} lazyRender={false}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+        <CollapseItem title="标题6" value={"6"} onClick={handleClick2}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+      </Collapse>
+      <Collapse activeValue={["3"]}>
+        <CollapseItem title="标题5" value={"5"} lazyRender={false}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+        <CollapseItem title="标题6" value={"6"} onClick={handleClick2}>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
+        </CollapseItem>
+      </Collapse>
       <Collapse activeValue={["3"]} size="Large">
         <CollapseItem title="标题5" value={"5"} lazyRender={false}>
-          <Text>测试数据测试数据测试数据测试数据测试数据测试数据</Text>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
         </CollapseItem>
         <CollapseItem title="标题6" value={"6"} onClick={handleClick2}>
-          <Text>测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据</Text>
+          <Text style={{ color: themeColor.Paragraph, fontSize: 12 }}>
+            测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据
+          </Text>
         </CollapseItem>
       </Collapse>
     </View>

package/src/components/Collapse/hooks/useCollapseContext.ts

@@ -6,4 +6,6 @@ export const CollapseContext = createContext<ICollapseContext>({
   addActiveValue: () => {},
   removeActiveValue: () => {},
   size: "Medium",
+  unregisterChild: () => {},
+  registerChild: () => {},
 });

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

@@ -8,6 +8,9 @@ export interface ICollapseContext {
   removeActiveValue?: (key: string | number) => void;
   size?: "Large" | "Medium" | "Small";
   activeValue?: Array<string | number>;
+  isMulti?: boolean;
+  unregisterChild: (val: any) => void;
+  registerChild: (val: any) => void;
 }
 export interface RedsCollapse {
   activeValue?: ActiveValueType;

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

@@ -31,11 +31,12 @@ export default function App() {
   const [value8, setValue8] = useState("12-10-05");
   const [value9, setValue9] = useState("12-10");
   const [value10, setValue10] = useState("12");
-  const [value11, setValue11] = useState("2023-10-05-12-10");
+  const [value11, setValue11] = useState("2025-09-04-10-22");
   const [value12, setValue12] = useState("2023-10-05-20-44");
   const [value13, setValue13] = useState("2023-10-05-12-10");
   const [value14, setValue14] = useState("2023-10-05-12");
   const [value16, setValue16] = useState("2023-10-05-12-10");
+  const [value17, setValue17] = useState("2025-9-15-14-25");
 
   const [visible1, setVisible1] = useState(false);
   const [visible2, setVisible2] = useState(false);
@@ -52,6 +53,7 @@ export default function App() {
   const [visible13, setVisible13] = useState(true);
   const [visible14, setVisible14] = useState(false);
   const [visible16, setVisible16] = useState(false);
+  const [visible17, setVisible17] = useState(false);
 
   const { show, remove } = useDatePicker();
   return (
@@ -242,8 +244,8 @@ export default function App() {
           setValue11(val);
           setVisible11(false);
         }}
-        onCancel={() => setVisible11(false)}
-        onChange={(val) => console.log("onChange11", val)}
+        // onCancel={() => setVisible11(false)}
+        // onChange={(val) => console.log("onChange11", val)}
       />
       <Br />
 
@@ -301,10 +303,11 @@ export default function App() {
       <Button
         onClick={() => {
           show({
-            value: value13,
+            value: value17,
             onConfirm: (val) => {
               console.log("confirm12 val", val);
-              setVisible13(false);
+              setVisible17(false);
+              remove();
             },
             onCancel: () => {
               remove();
@@ -315,9 +318,12 @@ export default function App() {
             // @ts-ignore
             cancel: true,
             close: true,
-            visible: visible13,
             cancelText: "取消",
             confirmText: "确定",
+            // 当前值 2025-9-15-14-25
+            startTime: "2025-9-15-14-25",
+            endTime: "2026-9-15-14-25",
+            mode: DatePickerType.DatePickerMode.YearMonthDayHourMinute,
           });
         }}
       >

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

@@ -43,11 +43,11 @@ export default function App() {
 
       <Desc>orientation 位置用法</Desc>
       <Br />
-      <Divider direction="horizontal" orientation={"left"}>
+      <Divider direction="horizontal" orientation={"left"} margin={[0, 12]}>
         orientation left
       </Divider>
       <Br />
-      <Divider direction="horizontal" orientation={"center"}>
+      <Divider direction="horizontal" orientation={"center"} margin={[0, 12]}>
         orientation center
       </Divider>
       <Br />

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

@@ -14,7 +14,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | ----------- | ----------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
 | direction   | 分割线的方向，是水平还是竖直 'horizontal' | 'vertical' | "primary" | "secondary" | "horizontal" | "vertical" | primary |
 | orientation | 分割线文字的位置（direction为horizontal时生效）             | "left" | "center" | "right"                              | center  |
-| size        | 分割线宽度/高度                                             | number                                                             |         |
+| size        | 分割线宽度/高度                                             | number | string                                               |         |
 | margin      | 分割线margin direction： horizontal/vertical [上下， 左右]  | [number | string, number | string] | undefined      |         |
 | color       | 分割线颜色                                                  | string                                                             |         |
 | stroke      | 分割线粗细                                                  | number                                                             |         |

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

@@ -3,7 +3,7 @@ import { lightColor } from "@xhs/reds-token-next";
 export interface RedsDivider {
   direction?: "primary" | "secondary" | "horizontal" | "vertical";
   orientation?: "left" | "center" | "right";
-  size?: number;
+  size?: number | string;
   margin?: [number | string, number | string] | undefined;
   color?: string;
   stroke?: number;

package/src/components/Divider/styles.ts

@@ -1,6 +1,5 @@
-import { StyleSheet, ViewStyle, TextStyle } from "react-native";
+import { StyleSheet, ViewStyle, TextStyle, DimensionValue } from "react-native";
 import { RedsDivider, DividerDefaultProps } from "./interface";
-import { typography } from "@xhs/reds-token-next";
 import { useThemeColor, useThemeTypography } from "../ConfigProvider";
 
 const baseDivider: ViewStyle = {
@@ -36,7 +35,16 @@ const getStyles = (p: RedsDivider) => {
     borderStyle: "solid",
     marginVertical: (props.margin && props.margin[0] && Number(props.margin[0])) || (isHorizontal ? 20 : 0),
     marginHorizontal: (props.margin && props.margin[1] && Number(props.margin[1])) || (isHorizontal ? 0 : 12),
-    width: isHorizontal ? props.size : "auto",
+    marginLeft:
+      (props.margin &&
+        props.margin[1] &&
+        (props.orientation === "center" || props.orientation === "left") &&
+        Number(props.margin[1])) ||
+      (isHorizontal ? 0 : 12),
+    marginRight:
+      (props.margin && props.margin[1] && props.orientation === "center" ? Number(props.margin[1]) : 0) ||
+      (isHorizontal ? 0 : 12),
+    width: (isHorizontal ? props.size : "auto") as DimensionValue,
   };
 
   const textContainer: TextStyle = {
@@ -82,7 +90,7 @@ const getStyles = (p: RedsDivider) => {
 
   const verticalStyle: ViewStyle = {
     ...dividerStyle,
-    height: props.size || 18,
+    height: (props.size || 18) as DimensionValue,
     marginVertical: 0,
   };