@xhsreds/reds-rn-next 0.10.1-fix-pull-refresh202511272021 → 0.11.0

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

@@ -10,39 +10,41 @@ 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                   |
-| headlerLayout      | headlerLayout                      | "center" | "left" | center                  |
+| 属性               | 描述                               | 类型                                                                      | 默认值                  |
+| ------------------ | ---------------------------------- | ------------------------------------------------------------------------- | ----------------------- |
+| 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                  |
+| openAnimation      | openAnimation                      | `{     duration?: number;     easing?: (value: number) => number;   }` | `{}`                    |
+| closeAnimation     | closeAnimation                     | `{     duration?: number;     easing?: (value: number) => number;   }` | `{}`                    |
 
 ### Events
 
-| 事件          | 描述             | 类型      | 默认值   |
-| ------------- | ---------------- | --------- | -------- |
-| onCancel      | 取消事件         | () => any | () => {} |
-| onConfirm     | 确定事件         | () => any | () => {} |
-| onAnimatedOut | 弹窗动画结束特效 | () => any | () => {} |
+| 事件          | 描述             | 类型         | 默认值      |
+| ------------- | ---------------- | ------------ | ----------- |
+| onCancel      | 取消事件         | () => any | () => {} |
+| onConfirm     | 确定事件         | () => any | () => {} |
+| onAnimatedOut | 弹窗动画结束特效 | () => any | () => {} |

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

@@ -33,6 +33,13 @@ export const enum AnimatedSheetsSize {
   auto = "auto",
   fixed = "fixed",
 }
+
+export interface SheetAnimationConfig {
+  /** Duration in milliseconds. Default: 150 */
+  duration?: number;
+  /** Easing function. Default: Easing.ease for sheet, Easing.linear for mask */
+  easing?: (value: number) => number;
+}
 export interface RedsSheets {
   label?: string;
   mask?: boolean;
@@ -63,6 +70,14 @@ export interface RedsSheets {
   onImmediateConfirm?: () => void;
   avoidSheetsMove?: boolean;
   headlerLayout?: "center" | "left";
+  openAnimation?: {
+    duration?: number;
+    easing?: (value: number) => number;
+  };
+  closeAnimation?: {
+    duration?: number;
+    easing?: (value: number) => number;
+  };
 }
 
 export interface RedsSheetsEvent {}
@@ -91,4 +106,6 @@ export const SheetsDefaultProps = {
   onImmediateConfirm: () => {},
   avoidSheetsMove: false,
   headlerLayout: "center",
+  openAnimation: {},
+  closeAnimation: {},
 };

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

@@ -3,7 +3,7 @@ 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, ClipPath } from "react-native-svg";
+import Svg, { Defs, LinearGradient, Stop, Rect, ClipPath } from "@xhs/reds-components/libs/svg";
 
 const RectAnimation = Animated.createAnimatedComponent(Rect);
 

package/src/components/Slider/Slider.tsx

@@ -15,10 +15,17 @@ import { RedsSlider, SliderDefaultProps } from "./interface/index";
 import styles from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
 
-const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChange, dotStyle = {} }: RedsSlider) => {
+const Slider = ({
+  defaultValue,
+  min = 0,
+  max = 100,
+  initalValue = 0,
+  onValueChange,
+  dotStyle = {},
+  step = 1,
+}: RedsSlider) => {
   useMounted("Slider");
-  const [panResponder, setPanResponder] = useState(PanResponder.create({}));
-  const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width * 0.8);
+  const [sliderWidth, setSliderWidth] = useState(Dimensions.get("window").width);
   const [value, setValue] = useState(initalValue);
 
   if (max < min) {
@@ -28,51 +35,109 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
     return;
   }
 
-  const thumbPosition = (value / (max - min)) * sliderWidth;
-  const step = 1;
+  // 添加一个函数来计算最接近的step值
+  const getSteppedValue = useCallback(
+    (rawValue: number) => {
+      const steppedValue = Math.round((rawValue - min) / step) * step + min;
+      return Math.max(min, Math.min(max, steppedValue));
+    },
+    [min, max, step],
+  );
+
   const animatedValue = useRef(new Animated.Value((initalValue * sliderWidth) / (max - min))).current;
+
+  const animatedThumbValue = useRef(
+    new Animated.Value(
+      (initalValue * sliderWidth) / (max - min) > 0
+        ? (initalValue * sliderWidth) / (max - min) - 8
+        : (initalValue * sliderWidth) / (max - min),
+    ),
+  ).current;
+
   useEffect(() => {
     const handleOrientationChange = () => {
-      setSliderWidth(Dimensions.get("window").width * 0.8);
+      setSliderWidth(Dimensions.get("window").width);
     };
 
     const subscription = Dimensions.addEventListener("change", handleOrientationChange);
-    createPanResponder();
     return () => {
       subscription.remove();
-      //Dimensions.removeEventListener("change", handleOrientationChange);
     };
   }, []);
 
   // 可以根据需要调整的滑块高度
-  const hanleValueUpdate = (gestureState: PanResponderGestureState) => {
-    const currentValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));
-
-    setValue(currentValue);
-    animatedValue.setValue((currentValue * sliderWidth) / (max - min));
-    if (onValueChange) {
-      onValueChange(currentValue);
-    }
-  };
+  const hanleValueUpdate = useCallback(
+    (gestureState: PanResponderGestureState) => {
+      // 计算原始值
+      const rawValue = Math.max(min, Math.min(max, (gestureState.dx / sliderWidth) * (max - min) + initalValue));
+      // 根据step计算实际值
+      const steppedValue = getSteppedValue(rawValue);
+
+      setValue(steppedValue);
+      animatedValue.setValue((steppedValue * sliderWidth) / (max - min));
+      animatedThumbValue.setValue(
+        (steppedValue * sliderWidth) / (max - min) > 0
+          ? (steppedValue * sliderWidth) / (max - min) - 8
+          : (steppedValue * sliderWidth) / (max - min),
+      );
+
+      if (onValueChange) {
+        onValueChange(steppedValue);
+      }
+    },
+    [min, max, sliderWidth, initalValue, step, getSteppedValue, onValueChange],
+  );
+
+  // 添加点击轨道跳转功能（可选）
+  const handleTrackPress = useCallback(
+    (event: GestureResponderEvent) => {
+      const { locationX } = event.nativeEvent;
+      const rawValue = (locationX / sliderWidth) * (max - min) + min;
+      const steppedValue = getSteppedValue(rawValue);
+
+      setValue(steppedValue);
+
+      // 使用动画过渡到新位置
+      Animated.timing(animatedValue, {
+        toValue: (steppedValue * sliderWidth) / (max - min),
+        duration: 200,
+        useNativeDriver: false,
+      }).start();
+
+      Animated.timing(animatedThumbValue, {
+        toValue:
+          (steppedValue * sliderWidth) / (max - min) > 0
+            ? (steppedValue * sliderWidth) / (max - min) - 8
+            : (steppedValue * sliderWidth) / (max - min),
+        duration: 200,
+        useNativeDriver: false,
+      }).start();
+
+      if (onValueChange) {
+        onValueChange(steppedValue);
+      }
+    },
+    [sliderWidth, min, max, getSteppedValue, onValueChange, animatedValue, animatedThumbValue],
+  );
 
   const handleLayout = (event: LayoutChangeEvent) => {
     setSliderWidth(event.nativeEvent.layout.width);
   };
 
-  const createPanResponder = () => {
-    setPanResponder(
+  const panResponder = useMemo(
+    () =>
       PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: () => {},
-        onPanResponderRelease: () => {},
+        onPanResponderGrant: () => true,
+        onPanResponderRelease: () => true,
         onPanResponderTerminate: () => {},
         onPanResponderMove: (evt, gestureState) => {
           hanleValueUpdate(gestureState);
         },
       }),
-    );
-  };
+    [hanleValueUpdate],
+  );
 
   const styles = StyleSheet.create({
     sliderContainer: {
@@ -81,7 +146,7 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
       justifyContent: "center",
     },
     trackContainer: {
-      width: "80%",
+      width: "100%",
       height: 4,
       backgroundColor: "rgba(48, 48, 52, 0.20)",
       borderRadius: 2,
@@ -107,21 +172,22 @@ const Slider = ({ defaultValue, min = 0, max = 100, initalValue = 0, onValueChan
     },
   });
 
-  //<View style={[styles.track, { width: sliderWidth }]}>
-  //<View style={[styles.thumb, { left: thumbPosition }]} {...panResponder.panHandlers} />
-  //</View>
   return (
-    <TouchableWithoutFeedback onPress={(e) => {}}>
-      <View style={styles.sliderContainer} onLayout={handleLayout}>
-        <View style={styles.trackContainer}>
-          <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />
-          <Animated.View
-            style={[styles.thumbButton, { transform: [{ translateX: animatedValue }] }, dotStyle]}
-            {...panResponder.panHandlers}
-          />
-        </View>
+    <View style={styles.sliderContainer}>
+      <View style={styles.trackContainer} onLayout={handleLayout}>
+        {/* 添加可点击的轨道 */}
+        <TouchableWithoutFeedback onPress={handleTrackPress}>
+          <View style={{ position: "absolute", width: "100%", height: 4 }} />
+        </TouchableWithoutFeedback>
+
+        <Animated.View style={[styles.coloredTrack, { width: animatedValue }]} />
+        <Animated.View
+          style={[styles.thumbButton, { transform: [{ translateX: animatedThumbValue }] }, dotStyle]}
+          {...panResponder.panHandlers}
+          hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+        />
       </View>
-    </TouchableWithoutFeedback>
+    </View>
   );
 };
 

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

@@ -8,6 +8,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingTop: 100,
     paddingBottom: 100,
+    paddingHorizontal: 50,
   },
   scrollView: {
     backgroundColor: "pink",
@@ -44,6 +45,23 @@ export default function App() {
       <Br />
       <Slider min={200} max={100}></Slider>
       <Br />
+      <Desc>step使用示例</Desc>
+      <Slider
+        min={0}
+        max={100}
+        step={10} // 每次移动10个单位
+        initalValue={0}
+        onValueChange={(value: any) => console.log("Current value:", value)}
+      />
+      <Br />
+      <Desc>step使用示例(或者更小的步长)</Desc>
+      <Slider
+        min={0}
+        max={1}
+        step={0.1} // 每次移动0.1个单位
+        initalValue={0.5}
+        onValueChange={(value: any) => console.log("Current value:", value)}
+      />
     </View>
   );
 }

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

@@ -29,9 +29,9 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件          | 描述               | 类型                   | 默认值 |
-| ------------- | ------------------ | ---------------------- | ------ |
-| onValueChange | 当值发生变化时触发 | (value: number) => any |        |
-| onDrag        | 拖拽时触发         | (value: Event) => any  |        |
-| onDragStart   | 拖拽开始触发       | (value: Event) => any  |        |
-| onDragEnd     | 拖拽完成触发       | (value: Event) => any  |        |
+| 事件          | 描述               | 类型                      | 默认值 |
+| ------------- | ------------------ | ------------------------- | ------ |
+| onValueChange | 当值发生变化时触发 | (value: number) => any |        |
+| onDrag        | 拖拽时触发         | (value: Event) => any  |        |
+| onDragStart   | 拖拽开始触发       | (value: Event) => any  |        |
+| onDragEnd     | 拖拽完成触发       | (value: Event) => any  |        |

package/src/components/Stepper/Stepper.tsx

@@ -84,7 +84,7 @@ const Stepper = (props: RedsStepper) => {
   }, [colorMode]);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, props.style]}>
       <TouchableWithoutFeedback onPress={() => handleNumber("min")}>
         <View style={[styles.icon, minus]}>
           <Image source={{ uri: minusImage }} style={[styles.minus]} />

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

@@ -21,7 +21,7 @@ export default function App() {
   return (
     <View style={styles.container}>
       <Text>基础用法</Text>
-      <Stepper value={value} onChange={handleChange} />
+      <Stepper value={value} onChange={handleChange} style={{ width: 200 }} />
 
       <Text>基础用法(非受控)</Text>
       <Stepper isControl={false} />

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

@@ -17,9 +17,10 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | min       | 最小值     | number  |        |
 | disable   | disable    | boolean | false  |
 | isControl | 是否受控   | boolean | true   |
+| style     | style      | any     |        |
 
 ### Events
 
-| 事件     | 描述               | 类型                   | 默认值 |
-| -------- | ------------------ | ---------------------- | ------ |
-| onChange | 当值发生变化时触发 | (value: number) => any |        |
+| 事件     | 描述               | 类型                      | 默认值 |
+| -------- | ------------------ | ------------------------- | ------ |
+| onChange | 当值发生变化时触发 | (value: number) => any |        |

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

@@ -7,6 +7,7 @@ export interface RedsStepper {
   disable?: boolean;
   onChange?: (value: number) => any;
   isControl?: boolean;
+  style?: any;
 }
 
 export interface RedsStepperEvent {}

package/src/components/Stepper/styles.ts

@@ -5,7 +5,8 @@ export const getStyles = (themeColor: any, typography: any) => {
       display: "flex",
       flexDirection: "row",
       alignItems: "center",
-      justifyContent: "center",
+      justifyContent: "space-between",
+      width: 72,
     },
     opacity: {
       opacity: 0.5,
@@ -21,7 +22,6 @@ export const getStyles = (themeColor: any, typography: any) => {
       lineHeight: 20,
     },
     text: {
-      paddingHorizontal: 8,
       fontWeight: typography.B1LooseFontWeight,
       fontSize: typography.T3FontSize,
       color: themeColor.Title,

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

@@ -25,7 +25,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件     | 描述               | 类型                                  | 默认值 |
-| -------- | ------------------ | ------------------------------------- | ------ |
-| onChange | 当值发生变化时触发 | (value: boolean) => any               |        |
-| onClick  | 被点击时触发       | (value: GestureResponderEvent) => any |        |
+| 事件     | 描述               | 类型                                     | 默认值 |
+| -------- | ------------------ | ---------------------------------------- | ------ |
+| onChange | 当值发生变化时触发 | (value: boolean) => any               |        |
+| onClick  | 被点击时触发       | (value: GestureResponderEvent) => any |        |

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

@@ -29,6 +29,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件     | 描述    | 类型                                  | 默认值 |
-| -------- | ------- | ------------------------------------- | ------ |
-| onChange | 点击tab | (value: string, index: number) => any |        |
+| 事件     | 描述    | 类型                                     | 默认值 |
+| -------- | ------- | ---------------------------------------- | ------ |
+| onChange | 点击tab | (value: string, index: number) => any |        |

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

@@ -24,6 +24,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件     | 描述         | 类型                   | 默认值 |
-| -------- | ------------ | ---------------------- | ------ |
-| onChange | 被点击时触发 | (value: string) => any |        |
+| 事件     | 描述         | 类型                      | 默认值 |
+| -------- | ------------ | ------------------------- | ------ |
+| onChange | 被点击时触发 | (value: string) => any |        |

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

@@ -29,7 +29,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件    | 描述         | 类型                                  | 默认值 |
-| ------- | ------------ | ------------------------------------- | ------ |
-| onClose | 点击时触发   | (value?: any) => any                  |        |
-| onClick | 被点击时触发 | (value: GestureResponderEvent) => any |        |
+| 事件    | 描述         | 类型                                     | 默认值 |
+| ------- | ------------ | ---------------------------------------- | ------ |
+| onClose | 点击时触发   | (value?: any) => any                  |        |
+| onClick | 被点击时触发 | (value: GestureResponderEvent) => any |        |

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

@@ -70,7 +70,7 @@ import TextFontFamily from "!!raw-loader!../demo/TextFontFamily.tsx";
 
 ### Events
 
-| 事件                | 描述               | 类型                    | 默认值   |
-| ------------------- | ------------------ | ----------------------- | -------- |
-| onClick             | 点击回调           | (value: string) => void |          |
-| onFirstDrawFinished | 第一次渲染结束回调 | () => void              | () => {} |
+| 事件                | 描述               | 类型                       | 默认值      |
+| ------------------- | ------------------ | -------------------------- | ----------- |
+| onClick             | 点击回调           | (value: string) => void |             |
+| onFirstDrawFinished | 第一次渲染结束回调 | () => void              | () => {} |

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

@@ -10,37 +10,37 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性                 | 描述                        | 类型                         | 默认值                               |
-| -------------------- | --------------------------- | ---------------------------- | ------------------------------------ |
-| modelValue           | 输入框内容                  | string                       |                                      |
-| placeholder          | 输入框占位提示文字          | string                       |                                      |
-| type                 | 输入框类型                  | inputTypeRN                  | "default" as inputTypeRN             |
-| maxLength            | 最大长度                    | number                       |                                      |
-| showCount            | 是否展示字数                | boolean                      | false                                |
-| isFormItem           | 是否是 Form 组件            | boolean                      | false                                |
-| disabled             | 是否禁用状态，默认为 false  | boolean                      | false                                |
-| readonly             | 只读                        | boolean                      | false                                |
-| clearable            | 是否展示清除按钮            | boolean                      | false                                |
-| autofocus            | 自动聚焦                    | boolean                      | false                                |
-| prefix               | 前缀插槽                    | ReactNode                    |                                      |
-| suffix               | 后缀插槽                    | ReactNode                    |                                      |
-| inputAlign           | 输入框对齐方式              | inputAlignType               | "left" as inputAlignType             |
-| formatter            | 格式化                      | TextFieldFormatter           |                                      |
-| formatterTrigger     | 格式化时机                  | TextFieldFormatTrigger       | "onChange" as TextFieldFormatTrigger |
-| iconType             | icon支持type                | iconType                     | iconType.svg                         |
-| onChange             | 输入框内容变化时的回调      | (value: string) => any       |                                      |
-| onClear              | 按下清除按钮的回调          | (value: string) => any       |                                      |
-| onFocus              | 聚焦                        | (event: any) => any          |                                      |
-| onBlur               | 失焦                        | (event: any) => any          |                                      |
-| style                | 组件样式                    | ViewStyle                    | `{}`                                 |
-| maxLengthStyle       | maxLength 自定义颜色        | TextStyle                    | `{}`                                 |
-| inputStyle           | textfield input 自定义样式  | ViewStyle | ViewStyle[] | `{}`                                 |
-| onSubmitEditing      | onSubmitEditing事件         | (nativeEvent: any) => void   | () => {}                             |
-| isControl            | isControl                   | boolean                      | false                                |
-| accessibility        | 无障碍的一系列属性 是个对象 | Object                       | `{}`                                 |
-| placeholderStyle     | placeholder样式             | Object                       | `{}`                                 |
-| placeholderTextColor | placeholderTextColor        | String                       |                                      |
-| ref                  | ref                         | any                          |                                      |
-| clearAccessibility   | clear accessibility         | Object                       | `{}`                                 |
+| 属性                 | 描述                        | 类型                          | 默认值                               |
+| -------------------- | --------------------------- | ----------------------------- | ------------------------------------ |
+| modelValue           | 输入框内容                  | string                        |                                      |
+| placeholder          | 输入框占位提示文字          | string                        |                                      |
+| type                 | 输入框类型                  | inputTypeRN                   | "default" as inputTypeRN             |
+| maxLength            | 最大长度                    | number                        |                                      |
+| showCount            | 是否展示字数                | boolean                       | false                                |
+| isFormItem           | 是否是 Form 组件            | boolean                       | false                                |
+| disabled             | 是否禁用状态，默认为 false  | boolean                       | false                                |
+| readonly             | 只读                        | boolean                       | false                                |
+| clearable            | 是否展示清除按钮            | boolean                       | false                                |
+| autofocus            | 自动聚焦                    | boolean                       | false                                |
+| prefix               | 前缀插槽                    | ReactNode                     |                                      |
+| suffix               | 后缀插槽                    | ReactNode                     |                                      |
+| inputAlign           | 输入框对齐方式              | inputAlignType                | "left" as inputAlignType             |
+| formatter            | 格式化                      | TextFieldFormatter            |                                      |
+| formatterTrigger     | 格式化时机                  | TextFieldFormatTrigger        | "onChange" as TextFieldFormatTrigger |
+| iconType             | icon支持type                | iconType                      | iconType.svg                         |
+| onChange             | 输入框内容变化时的回调      | (value: string) => any     |                                      |
+| onClear              | 按下清除按钮的回调          | (value: string) => any     |                                      |
+| onFocus              | 聚焦                        | (event: any) => any        |                                      |
+| onBlur               | 失焦                        | (event: any) => any        |                                      |
+| style                | 组件样式                    | ViewStyle                     | `{}`                                 |
+| maxLengthStyle       | maxLength 自定义颜色        | TextStyle                     | `{}`                                 |
+| inputStyle           | textfield input 自定义样式  | ViewStyle | ViewStyle[]  | `{}`                                 |
+| onSubmitEditing      | onSubmitEditing事件         | (nativeEvent: any) => void | () => {}                          |
+| isControl            | isControl                   | boolean                       | false                                |
+| accessibility        | 无障碍的一系列属性 是个对象 | Object                        | `{}`                                 |
+| placeholderStyle     | placeholder样式             | Object                        | `{}`                                 |
+| placeholderTextColor | placeholderTextColor        | String                        |                                      |
+| ref                  | ref                         | any                           |                                      |
+| clearAccessibility   | clear accessibility         | Object                        | `{}`                                 |
 
 ### Events

package/src/components/TextView/TextView.tsx

@@ -68,7 +68,8 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
 
   const handleChangeText = useCallback(
     (value: string) => {
-      updateValue(value);
+      const filteredValue = props.returnKeyType !== "next" ? value.replace(/\n/g, "") : value;
+      updateValue(filteredValue);
       // Only apply cursor fix on iOS when text equals maxLength (indicating truncation)
       if (Platform.OS === "ios" && maxLength && value.length >= maxLength && inputRef.current) {
         // Use requestAnimationFrame instead of setTimeout
@@ -134,8 +135,10 @@ const TextField = forwardRef((props: RedsTextView, ref) => {
   }, [layout]);
 
   const handleKeyPress = ({ nativeEvent }: any) => {
-    if (nativeEvent.key === "Enter" && props.returnKeyType !== "next") {
-      Keyboard.dismiss();
+    if (nativeEvent.key === "Enter") {
+      if (props.returnKeyType !== "next") {
+        Keyboard.dismiss();
+      }
     }
   };
 

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

@@ -26,7 +26,7 @@ export default function App() {
         clearable
         actionLayout={"horizontal"}
         autofocus={true}
-        returnKeyType={"search"}
+        returnKeyType={"done"}
       />
       <Desc>最大长度</Desc>
       <TextView modelValue={modelValue} maxLength={100} showCount placeholder="占位符" />

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

@@ -25,15 +25,15 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 | autofocus            | 自动聚焦                     | boolean                                  | false                    |
 | rows                 | 最大展示行数                 | number                                   | 3                        |
 | style                | 自定义容器样式               | ViewStyle                                |                          |
-| onChange             | 输入域内容变化时的回调       | (value: string) => any                   |                          |
-| onClear              | 按下清除按钮的回调           | (value: string) => any                   |                          |
-| onFocus              | 聚焦                         | (event: any) => any                      |                          |
-| onBlur               | 失焦                         | (event: any) => any                      |                          |
+| onChange             | 输入域内容变化时的回调       | (value: string) => any                |                          |
+| onClear              | 按下清除按钮的回调           | (value: string) => any                |                          |
+| onFocus              | 聚焦                         | (event: any) => any                   |                          |
+| onBlur               | 失焦                         | (event: any) => any                   |                          |
 | containerStyle       | 容器样式                     | ViewStyle                                |                          |
 | actionLayout         | 容器样式                     | "horizontal" | "vertical"           | vertical                 |
 | placeholderTextColor | placeholderTextColor         | String                                   |                          |
 | ref                  | ref                          | any                                      |                          |
 | returnKeyType        | returnType key 的 type       | string                                   | next                     |
-| onSubmitEditing      | onSubmitEditing              | () => void                               |                          |
+| onSubmitEditing      | onSubmitEditing              | () => void                            |                          |
 
 ### Events