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

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
 

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

@@ -62,6 +62,7 @@ export interface RedsSheets {
   onImmediateCancel?: () => void;
   onImmediateConfirm?: () => void;
   avoidSheetsMove?: boolean;
+  headlerLayout?: "center" | "left";
 }
 
 export interface RedsSheetsEvent {}
@@ -89,4 +90,5 @@ export const SheetsDefaultProps = {
   onImmediateCancel: () => {},
   onImmediateConfirm: () => {},
   avoidSheetsMove: false,
+  headlerLayout: "center",
 };

package/src/components/Sheets/styles.ts

@@ -37,12 +37,23 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12,
   },
+  leftLabelContainer: {
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    flexDirection: "row",
+    height: 44,
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+  },
   cancel: {
-    fontSize: typography.B1LooseFontSize,
+    fontSize: typography.B2LooseSwitchFontSize,
     fontWeight: typography.B1LooseFontWeight,
   },
   confirm: {
-    fontSize: typography.B1LooseFontSize,
+    fontSize: typography.B2LooseSwitchFontSize,
     fontWeight: typography.T3FontWeight,
   },
   label: {
@@ -79,6 +90,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     flexDirection: "row",
     width: "100%",
+    paddingHorizontal: 56,
   },
   action: {
     flex: 1,

package/src/components/Skeleton/Item/SkeletonItem.tsx

@@ -3,12 +3,19 @@ import { View, Easing, Animated, Text } from "react-native";
 import { RedsSkeletonItem, SkeletonItemDefaultProps } from "./interface/index";
 import createStyles from "./styles";
 import { useThemeColor } from "../../ConfigProvider";
-import Svg, { Defs, LinearGradient, Stop, Rect } from "react-native-svg";
+import Svg, { Defs, LinearGradient, Stop, Rect, ClipPath } from "react-native-svg";
 
 const RectAnimation = Animated.createAnimatedComponent(Rect);
 
 const SkeletonItem = (props: RedsSkeletonItem) => {
-  const { loading, type, animation, containerStyle } = { ...SkeletonItemDefaultProps, ...props };
+  const {
+    loading,
+    type,
+    animation,
+    containerStyle,
+    borderRadius, // 解构新属性
+  } = { ...SkeletonItemDefaultProps, ...props };
+
   const animValue = useRef(new Animated.Value(0)).current;
   const themeColor = useThemeColor();
   const styles = createStyles(type);
@@ -33,7 +40,16 @@ const SkeletonItem = (props: RedsSkeletonItem) => {
 
   return (
     loading && (
-      <Animated.View style={[styles, containerStyle]}>
+      <Animated.View
+        style={[
+          styles,
+          {
+            borderRadius: borderRadius, // 应用 borderRadius
+            overflow: "hidden", // 确保内容不会超出圆角边界
+          },
+          containerStyle,
+        ]}
+      >
         <Svg height="100%" width="100%">
           <Defs>
             <LinearGradient id="gradient" x1="0" y1="0" x2="100%" y2="0%">
@@ -41,8 +57,29 @@ const SkeletonItem = (props: RedsSkeletonItem) => {
               <Stop offset="28%" stopColor={props.color || themeColor.Fill1} stopOpacity={0.15} />
               <Stop offset="35%" stopColor={props.color || themeColor.Fill1} stopOpacity={0.2} />
             </LinearGradient>
+            {/* 如果需要 SVG 内容也遵循圆角，添加 ClipPath */}
+            {borderRadius > 0 && (
+              <ClipPath id="clip">
+                <Rect
+                  x="0"
+                  y="0"
+                  width="100%"
+                  height="100%"
+                  rx={type === "avatar" ? 100 : borderRadius}
+                  ry={type === "avatar" ? 100 : borderRadius}
+                />
+              </ClipPath>
+            )}
           </Defs>
-          <RectAnimation x={interpolatedValue} y="0%" width="400%" height="100%" fill="url(#gradient)" opacity={0.3} />
+          <RectAnimation
+            x={interpolatedValue}
+            y="0%"
+            width="400%"
+            height="100%"
+            fill="url(#gradient)"
+            opacity={0.3}
+            clipPath={borderRadius > 0 ? "url(#clip)" : undefined} // 应用裁剪路径
+          />
         </Svg>
       </Animated.View>
     )

package/src/components/Skeleton/Item/interface/index.ts

@@ -6,10 +6,12 @@ export interface RedsSkeletonItem {
   animation?: boolean;
   loading?: boolean;
   color?: string;
+  borderRadius?: number;
 }
 
 export const SkeletonItemDefaultProps = {
   type: "paragraph",
   animation: true,
   loading: true,
+  borderRadius: 4,
 };

package/src/components/Skeleton/Skeleton.tsx

@@ -9,7 +9,6 @@ const Skeleton = (props: RedsSkeleton) => {
   useMounted("Skeleton");
   const { loading, animation } = { ...SkeletonDefaultProps, ...props };
   const styles = createStyles();
-
   return (
     loading && (
       <>
@@ -33,11 +32,16 @@ const Skeleton = (props: RedsSkeleton) => {
           color={props.color}
         />
         <View style={styles.defaultBottomButton}>
-          <SkeletonItem animation={animation} type="button" containerStyle={{ width: 124 }} color={props.color} />
           <SkeletonItem
             animation={animation}
             type="button"
-            containerStyle={{ flex: 1, marginLeft: 15 }}
+            containerStyle={{ width: 124, borderRadius: 100 }}
+            color={props.color}
+          />
+          <SkeletonItem
+            animation={animation}
+            type="button"
+            containerStyle={{ flex: 1, marginLeft: 15, borderRadius: 100 }}
             color={props.color}
           />
         </View>

package/src/components/Skeleton/demo/button.tsx

@@ -5,8 +5,8 @@ import { SkeletonItem } from "@xhs/reds-rn-next";
 export default function App() {
   return (
     <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
-      <SkeletonItem type="button" containerStyle={{ width: 124 }} />
-      <SkeletonItem type="button" containerStyle={{ flex: 1, marginLeft: 15 }} />
+      <SkeletonItem type="button" containerStyle={{ width: 124, borderRadius: 100 }} />
+      <SkeletonItem type="button" containerStyle={{ flex: 1, marginLeft: 15, borderRadius: 100 }} />
     </View>
   );
 }

package/src/components/StatusBar/hook/getStatusHeight.ts

@@ -162,6 +162,10 @@ export const safeAreaBottomInset = () => {
     return 20;
   }
 
+  if (Platform.OS === "android") {
+    return 20;
+  }
+
   return 0;
 };