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

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

@@ -10,27 +10,27 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Props
 
-| 属性          | 描述                                      | 类型                   | 默认值                      |
-| ------------- | ----------------------------------------- | ---------------------- | --------------------------- |
-| visible       | 是否展示datePicker                        | boolean                | false                       |
-| value         | 选中值                                    | string                 |                             |
-| cancelText    | 关闭文案                                  | string                 |                             |
-| mode          | 模式                                      | DatePickerMode         | DatePickerMode.YearMonthDay |
-| startYear     | 选择器的最小可选时间，默认为当前时间-10年 | number                 |                             |
-| endYear       | 选择器的最大可选时间，默认为当前时间+10年 | number                 |                             |
-| startTime     | 选择器的最小可选时间，优先级大于startYear | string                 |                             |
-| endTime       | 选择器的最大可选时间，优先级大于endYear   | string                 |                             |
-| label         | 标题                                      | string                 |                             |
-| formatter     | 格式化时间格式                            | (value: string) => any | (value: string) => value    |
-| isDatePattern | 是否返回时间格式数据                      | boolean                | false                       |
-| closeText     | 关闭文案                                  | string                 |                             |
-| mask          | mask                                      | boolean                |                             |
-| hostName      | hostName                                  | string                 | root                        |
+| 属性          | 描述                                      | 类型                      | 默认值                      |
+| ------------- | ----------------------------------------- | ------------------------- | --------------------------- |
+| visible       | 是否展示datePicker                        | boolean                   | false                       |
+| value         | 选中值                                    | string                    |                             |
+| cancelText    | 关闭文案                                  | string                    |                             |
+| mode          | 模式                                      | DatePickerMode            | DatePickerMode.YearMonthDay |
+| startYear     | 选择器的最小可选时间，默认为当前时间-10年 | number                    |                             |
+| endYear       | 选择器的最大可选时间，默认为当前时间+10年 | number                    |                             |
+| startTime     | 选择器的最小可选时间，优先级大于startYear | string                    |                             |
+| endTime       | 选择器的最大可选时间，优先级大于endYear   | string                    |                             |
+| label         | 标题                                      | string                    |                             |
+| formatter     | 格式化时间格式                            | (value: string) => any | (value: string) => value |
+| isDatePattern | 是否返回时间格式数据                      | boolean                   | false                       |
+| closeText     | 关闭文案                                  | string                    |                             |
+| mask          | mask                                      | boolean                   |                             |
+| hostName      | hostName                                  | string                    | root                        |
 
 ### Events
 
-| 事件      | 描述               | 类型                    | 默认值                |
-| --------- | ------------------ | ----------------------- | --------------------- |
-| onChange  | 当值发生变化时触发 | (value: string) => void | (value: string) => {} |
-| onCancel  | 取消事件           | () => void              | () => {}              |
-| onConfirm | 确定事件           | (value: string) => void | (value: string) => {} |
+| 事件      | 描述               | 类型                       | 默认值                   |
+| --------- | ------------------ | -------------------------- | ------------------------ |
+| onChange  | 当值发生变化时触发 | (value: string) => void | (value: string) => {} |
+| onCancel  | 取消事件           | () => void              | () => {}              |
+| onConfirm | 确定事件           | (value: string) => void | (value: string) => {} |

package/src/components/Divider/Divider.tsx

@@ -1,28 +1,48 @@
-import React from "react";
+import React, { useState, useMemo } from "react";
 import { View, Text } from "react-native";
 import { RedsDivider, DividerDefaultProps } from "./interface";
 import { getStyles } from "./styles";
 import useMounted from "../../pvCount/useUnmountedProcess";
+import { useThemeColor, useThemeTypography } from "../ConfigProvider";
 
 const Divider = (props: RedsDivider) => {
+  const [textWidth, setTextWidth] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const themeColor = useThemeColor("Divider");
+  const typography = useThemeTypography("Divider");
   useMounted("Divider");
   const finalProps: RedsDivider = {
     ...DividerDefaultProps,
     ...props,
-    direction: props.direction as RedsDivider["direction"],
-    orientation: props.orientation as RedsDivider["orientation"],
+    direction: (props.direction || DividerDefaultProps.direction) as RedsDivider["direction"],
+    orientation: (props.orientation || DividerDefaultProps.orientation) as RedsDivider["orientation"],
   };
 
-  const styles = getStyles(finalProps);
-  const isPrimary = finalProps.direction === "primary" || finalProps.direction === "secondary";
+  const styles = useMemo(() => {
+    return getStyles(finalProps, textWidth, containerWidth, themeColor, typography);
+  }, [textWidth, containerWidth, themeColor, typography]);
+
+  const handleLayout = (e: any) => {
+    setTextWidth(e.nativeEvent.layout.width);
+  };
+
+  const handlerContainerWidth = (e: any) => {
+    setContainerWidth(e.nativeEvent.layout.width);
+  };
 
   return (
-    <View style={[styles.divider, styles[finalProps.direction!]]}>
+    <View style={[styles.divider, styles[finalProps.direction!]]} onLayout={handlerContainerWidth}>
       {finalProps.orientation && finalProps.direction !== "vertical" && (
         <View style={styles.textContainer}>
-          {isPrimary && <View style={styles.before} />}
-          {props.children && <Text style={styles.text}>{props.children}</Text>}
-          {isPrimary && <View style={styles.after} />}
+          <View style={styles.before} />
+          {props.children ? (
+            <Text style={styles.text} onLayout={handleLayout}>
+              {props.children}
+            </Text>
+          ) : (
+            <Text style={styles.noTextBorderStyle}></Text>
+          )}
+          <View style={styles.after} />
         </View>
       )}
     </View>

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
 import { Divider } from "@xhs/reds-rn-next";
 
 const styles = StyleSheet.create({
@@ -21,23 +21,29 @@ const Br = (props: { height?: number }) => <View style={{ height: props.height |
 
 export default function App() {
   return (
-    <View>
+    <ScrollView>
+      <Br />
+      <Br />
       <Desc>默认用法</Desc>
       <Divider>测试</Divider>
       <Br />
-      <Desc>direction 类型用法</Desc>
+      <Desc>direction="primary"</Desc>
       <Divider direction="primary" orientation={"center"}>
         测试
       </Divider>
       <Br />
-      <Divider direction="secondary">测试 </Divider>
+      <Desc>direction="secondary"</Desc>
+      <Divider direction="secondary" orientation={"center"}>
+        测试
+      </Divider>
       <Br />
 
+      <Desc>direction="vertical"</Desc>
       <View style={styles.itemBox}>
         <Divider direction="vertical">测试</Divider>
       </View>
+      <Desc>direction="horizontal"</Desc>
       <Divider direction="horizontal">测试</Divider>
-      <Divider direction="horizontal"></Divider>
       <Br />
       <Br />
 
@@ -67,6 +73,6 @@ export default function App() {
       <Desc>margin 数组：horizontal / [上下，左右] vertical / [左右]</Desc>
       <Divider margin={[10, 20]} stroke={2} direction="horizontal" />
       <Divider margin={[10, 0]} stroke={2} direction="vertical" />
-    </View>
+    </ScrollView>
   );
 }

package/src/components/Divider/styles.ts

@@ -1,38 +1,30 @@
 import { StyleSheet, ViewStyle, TextStyle, DimensionValue } from "react-native";
 import { RedsDivider, DividerDefaultProps } from "./interface";
-import { useThemeColor, useThemeTypography } from "../ConfigProvider";
 
 const baseDivider: ViewStyle = {
   position: "relative",
 };
 
-const baseText: TextStyle = {
-  paddingVertical: 0,
-  paddingHorizontal: 16,
-  position: "absolute",
-  backgroundColor: "#fff",
-  lineHeight: 18,
-};
-
-const getStyles = (p: RedsDivider) => {
+const getStyles = (p: RedsDivider, textWidth: number, containerWidth: number, themeColor: any, typography: any) => {
   const props = { ...DividerDefaultProps, ...p };
-  const themeColor = useThemeColor("Divider");
-  const typography = useThemeTypography("Divider");
   const isHorizontal = props.direction === "horizontal";
+  const hasTextContent = p.children;
+
+  const remainingWidth = containerWidth - textWidth;
+
   const beforeAfterCommon: ViewStyle = {
     borderStyle: "solid",
-    borderTopWidth: 0.5,
+    borderTopWidth: props.stroke || 0.5,
     borderColor: props.color || themeColor.Separator2,
-    width: 8,
   };
 
   const dividerStyle: ViewStyle = {
     ...baseDivider,
-    borderBottomWidth: isHorizontal ? (props.stroke ? props.stroke : StyleSheet.hairlineWidth) : 0,
-    borderLeftWidth: isHorizontal ? 0 : props.stroke ? props.stroke : StyleSheet.hairlineWidth,
-    borderBottomColor: isHorizontal ? props.color || themeColor.Separator2 : undefined,
-    borderLeftColor: isHorizontal ? undefined : props.color || themeColor.Separator2,
-    borderStyle: "solid",
+    // borderBottomWidth: isHorizontal && hasTextContent ? 0 : (isHorizontal ? (props.stroke ? props.stroke : StyleSheet.hairlineWidth) : 0),
+    // borderLeftWidth: isHorizontal ? 0 : props.stroke ? props.stroke : StyleSheet.hairlineWidth,
+    // borderBottomColor: isHorizontal && !hasTextContent ? props.color || themeColor.Separator2 : undefined,
+    // borderLeftColor: isHorizontal ? undefined : props.color || themeColor.Separator2,
+    // 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),
     marginLeft:
@@ -47,17 +39,11 @@ const getStyles = (p: RedsDivider) => {
     width: (isHorizontal ? props.size : "auto") as DimensionValue,
   };
 
-  const textContainer: TextStyle = {
-    paddingVertical: 0,
-    paddingHorizontal: 16,
-    position: "absolute",
-    lineHeight: 18,
-    left: props.orientation === "left" ? 24 : undefined,
-    right: props.orientation === "right" ? 24 : undefined,
-    alignSelf: props.orientation === "center" ? "center" : undefined,
+  const textContainer: ViewStyle = {
     flexDirection: "row",
     alignItems: "center",
-    top: (isHorizontal && -9) || 0,
+    width: "100%",
+    // 移除 position absolute，改为正常布局
   };
 
   const textStyle: TextStyle = {
@@ -78,13 +64,29 @@ const getStyles = (p: RedsDivider) => {
 
   const beforeStyle: ViewStyle = {
     ...beforeAfterCommon,
-    marginRight: 8,
+    marginRight: props.children ? 8 : 0,
+    ...(isHorizontal
+      ? props.orientation === "center"
+        ? { flex: 1 }
+        : { width: props.orientation === "left" ? remainingWidth * 0.15 : remainingWidth * 0.85 }
+      : { width: 8 }),
     borderColor: props.direction === "secondary" ? "rgba(51, 51, 51, .3)" : props.color || themeColor.Separator2,
   };
 
   const afterStyle: ViewStyle = {
     ...beforeAfterCommon,
-    marginLeft: 8,
+    marginLeft: props.children ? 8 : 0,
+    ...(isHorizontal
+      ? props.orientation === "center"
+        ? { flex: 1 }
+        : { width: props.orientation === "right" ? remainingWidth * 0.15 : remainingWidth * 0.85 }
+      : { width: 8 }),
+    borderColor: props.direction === "secondary" ? "rgba(51, 51, 51, .3)" : props.color || themeColor.Separator2,
+  };
+
+  const noTextBorderStyle: ViewStyle = {
+    ...beforeAfterCommon,
+    width: "auto",
     borderColor: props.direction === "secondary" ? "rgba(51, 51, 51, .3)" : props.color || themeColor.Separator2,
   };
 
@@ -104,6 +106,7 @@ const getStyles = (p: RedsDivider) => {
     text: textStyle,
     before: beforeStyle,
     after: afterStyle,
+    noTextBorderStyle: noTextBorderStyle,
   });
 };
 

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

@@ -65,9 +65,9 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件      | 描述            | 类型                                 | 默认值   |
-| --------- | --------------- | ------------------------------------ | -------- |
-| onReset   | filter 重置选项 | () => void                           | () => {} |
-| onConfirm | 确定选项        | () => void                           | () => {} |
-| onClose   | 关闭            | () => void                           | () => {} |
-| onChange  | 选择onChange    | (key: string, index: number) => void | () => {} |
+| 事件      | 描述            | 类型                                    | 默认值      |
+| --------- | --------------- | --------------------------------------- | ----------- |
+| onReset   | filter 重置选项 | () => void                           | () => {} |
+| onConfirm | 确定选项        | () => void                           | () => {} |
+| onClose   | 关闭            | () => void                           | () => {} |
+| onChange  | 选择onChange    | (key: string, index: number) => void | () => {} |

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

@@ -20,6 +20,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件    | 描述         | 类型       | 默认值 |
-| ------- | ------------ | ---------- | ------ |
-| onClick | 访问链接操作 | () => void |        |
+| 事件    | 描述         | 类型          | 默认值 |
+| ------- | ------------ | ------------- | ------ |
+| onClick | 访问链接操作 | () => void |        |

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

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

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

@@ -23,7 +23,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件     | 描述           | 类型                                   | 默认值 |
-| -------- | -------------- | -------------------------------------- | ------ |
-| onSubmit | 点击提交时触发 | (value: FormData, errors: any) => void |        |
-| onError  | 有错误时触发   | (error: any, data: FormData) => void   |        |
+| 事件     | 描述           | 类型                                      | 默认值 |
+| -------- | -------------- | ----------------------------------------- | ------ |
+| onSubmit | 点击提交时触发 | (value: FormData, errors: any) => void |        |
+| onError  | 有错误时触发   | (error: any, data: FormData) => void   |        |

package/src/components/Icon/Icon.72.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from "react";
 import { GestureResponderEvent, Image, TouchableOpacity } from "react-native";
-import { SvgXml } from "react-native-svg";
+import { SvgXml } from "@xhs/reds-components/libs/svg";
 import { RedsIcon, IconDefaultProps, iconType } from "./interface/index";
 const Icon: React.FC<RedsIcon> = (props) => {
   const { size, fill, onClick, icon } = props || {};

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

@@ -24,6 +24,6 @@ Jfrog平台查一下最新@xhs/reder-icon-svg-ReDs_icon版本项目中引入 按
 
 ### Events
 
-| 事件    | 描述         | 类型                                   | 默认值 |
-| ------- | ------------ | -------------------------------------- | ------ |
-| onClick | 被点击时触发 | (value: GestureResponderEvent) => void |        |
+| 事件    | 描述         | 类型                                      | 默认值 |
+| ------- | ------------ | ----------------------------------------- | ------ |
+| onClick | 被点击时触发 | (value: GestureResponderEvent) => void |        |

package/src/components/Icon/test/index.test.tsx

@@ -3,11 +3,11 @@ import React from "react";
 import { render, fireEvent } from "@testing-library/react-native";
 import { describe, it, expect, vi } from "vitest";
 import Icon, { IconType } from "../index";
-import { SvgXml } from "react-native-svg";
+import { SvgXml } from "@xhs/reds-components/libs/svg";
 import { RedsIcon, IconDefaultProps } from "../interface/index";
 
 // Mock SvgXml
-vi.mock("react-native-svg", () => ({
+vi.mock("@xhs/reds-components/libs/svg", () => ({
   SvgXml: ({ xml }: { xml: string }) => <svg>{xml}</svg>,
 }));
 

package/src/components/Image/CircularProgress.tsx

@@ -1,7 +1,7 @@
 import { lightColor } from "@xhs/reds-token-next";
 import React, { useEffect, useRef } from "react";
 import { View, Animated, StyleSheet } from "react-native";
-import Svg, { Circle, G } from "react-native-svg";
+import Svg, { Circle, G } from "@xhs/reds-components/libs/svg";
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 

package/src/components/Image/Image.tsx

@@ -206,9 +206,15 @@ const Image = ({
   };
 
   const colorMode = useColorMode();
-
   return (
-    <View style={{ borderRadius, height, width, ...(style as {}) }}>
+    <View
+      style={{
+        borderRadius: borderRadius || style?.borderRadius,
+        ...(style as {}),
+        height: ((height || style?.height || 0) as number) + (style?.borderWidth || 0) * 2,
+        width: ((width || style?.width || 0) as number) + (style?.borderWidth || 0) * 2,
+      }}
+    >
       {imageStatus !== IMAGE_STATUS.HIDE && (
         <RNImage
           {...props}
@@ -225,7 +231,7 @@ const Image = ({
           style={{
             width: width || style?.width,
             height: height || style?.height,
-            borderRadius,
+            borderRadius: borderRadius || style?.borderRadius,
             // opacity: imageStatus === IMAGE_STATUS.LOADED ? 1 : 0,
           }}
           // @ts-ignore
@@ -235,12 +241,11 @@ const Image = ({
       {imageStatus === IMAGE_STATUS.LOADING && loadStyle !== TLoadStyle.NONE && (
         <View
           style={{
-            width,
-            height,
-            borderRadius,
+            width: width || style?.width,
+            height: height || style?.height,
+            borderRadius: borderRadius || style?.borderRadius,
             ...styles.loadingContainer,
             backgroundColor: loadStyle === TLoadStyle.AVE ? aveColor : styles.loadingContainer.backgroundColor,
-            ...style,
           }}
         >
           {loadStyle === TLoadStyle.BLUR && (
@@ -249,7 +254,7 @@ const Image = ({
               style={{
                 width: width || style?.width,
                 height: height || style?.height,
-                borderRadius,
+                borderRadius: borderRadius || style?.borderRadius,
               }}
               // @ts-ignore
               apmBiz={props.apmBiz}
@@ -265,7 +270,7 @@ const Image = ({
             onPress={(e) => {
               onReload(e);
             }}
-            style={{ width, height, borderRadius, ...styles.loadingContainer }}
+            style={{ width, height, ...styles.loadingContainer }}
           >
             <RNImage
               style={{ width: 40, height: 40 }}

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

@@ -16,24 +16,23 @@ export default function App() {
   return (
     <View style={{ display: "flex", flexDirection: "row" }}>
       <ScrollView style={{ backgroundColor: "#50796633" }}>
-        <Desc>基础用法</Desc>
+        {/* <Desc>基础用法</Desc>
 
         <Image width={150} height={150} borderRadius={30} source={{ uri: imageUrl }} abortApmCollection={true}></Image>
         <Br />
 
-        <Desc>Image组件加边框</Desc>
+        <Desc>Image组件加边框</Desc> */}
 
         <Image
           width={150}
           height={150}
-          borderRadius={30}
           source={{ uri: imageUrl }}
           abortApmCollection={true}
           style={{ borderWidth: 1, borderStyle: "solid", borderColor: "red", borderRadius: 50 }}
         ></Image>
         <Br />
 
-        <Desc>加载时显示主要色</Desc>
+        {/* <Desc>加载时显示主要色</Desc>
         <Image loadStyle={TLoadStyle.AVE} width={150} height={150} borderRadius={30} src={imageUrl}></Image>
 
         <Br />
@@ -94,7 +93,7 @@ export default function App() {
           onReload={() => {
             setImageUrl2(imageUrl);
           }}
-        ></Image>
+        ></Image> */}
       </ScrollView>
     </View>
   );

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

@@ -28,7 +28,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件                | 描述               | 类型                               | 默认值   |
-| ------------------- | ------------------ | ---------------------------------- | -------- |
-| onReload            | 重新加载时触发     | (v: GestureResponderEvent) => void |          |
-| onFirstDrawFinished | 第一次渲染结束回调 | (e: Event) => void                 | () => {} |
+| 事件                | 描述               | 类型                                  | 默认值      |
+| ------------------- | ------------------ | ------------------------------------- | ----------- |
+| onReload            | 重新加载时触发     | (v: GestureResponderEvent) => void |             |
+| onFirstDrawFinished | 第一次渲染结束回调 | (e: Event) => void                 | () => {} |

package/src/components/List/ListItem/ArrowRight.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Svg, { Path } from "react-native-svg";
+import Svg, { Path } from "@xhs/reds-components/libs/svg";
 
 const ArrowRight: React.FC = () => {
   return (

package/src/components/List/ListItem/ListItem.tsx

@@ -21,6 +21,8 @@ export interface RedsListItem {
   contentStyle?: ViewStyle;
   badgeActionContent?: string;
   badgeTitleContent?: string;
+  style?: any;
+  lineStyle?: any;
 }
 
 const ListItem: React.FC<RedsListItem> = ({
@@ -38,6 +40,8 @@ const ListItem: React.FC<RedsListItem> = ({
   children,
   badgeActionContent,
   badgeTitleContent,
+  style,
+  lineStyle,
 }) => {
   useMounted("ListItem");
   const styles = createStyles();
@@ -66,6 +70,7 @@ const ListItem: React.FC<RedsListItem> = ({
           styles.listItem,
           children ? {} : { height: listItemSizeToHeight[size] },
           size === "expand" && styles.expand,
+          style,
         ]}
       >
         {children ? (
@@ -75,7 +80,13 @@ const ListItem: React.FC<RedsListItem> = ({
             {prefix && (
               <View style={[styles.prefix, { height: listItemSizeToHeight[size] }, prefixStyle]}>{prefix}</View>
             )}
-            <View style={[styles.contentBox, lineItem ? styles.hr : {}, { height: listItemSizeToHeight[size] }]}>
+            <View
+              style={[
+                styles.contentBox,
+                lineItem ? { ...styles.hr, ...lineStyle } : {},
+                { height: listItemSizeToHeight[size] },
+              ]}
+            >
               <View
                 style={[styles.contentContainer, { marginBottom: 12, marginTop: 12 }, prefix ? { height: 48 } : {}]}
               >

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

@@ -51,6 +51,8 @@ export default function ListDemo() {
           onClick={() => {
             console.log("click item");
           }}
+          // style={{ backgroundColor: 'blue'}}
+          lineStyle={{ borderBottomColor: "red" }}
         />
         <ListItem title="标题" actionText="描述" />
       </List>

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

@@ -22,6 +22,6 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件    | 描述     | 类型       | 默认值 |
-| ------- | -------- | ---------- | ------ |
-| onClick | 点击事件 | () => void |        |
+| 事件    | 描述     | 类型          | 默认值 |
+| ------- | -------- | ------------- | ------ |
+| onClick | 点击事件 | () => void |        |

package/src/components/NoticeBar/NoticeBar.tsx

@@ -122,7 +122,9 @@ const NoticeBar = (props: RedsNoticeBar) => {
         )}
       </View>
       {props.actionType === NoticeBarActionType.TEXTACTION ? (
-        <Text style={styles.linkText}>{props.actionText || jumpKey}</Text>
+        <Text style={styles.linkText} onPress={handleLink}>
+          {props.actionText || jumpKey}
+        </Text>
       ) : (
         <></>
       )}

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

@@ -26,7 +26,7 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件    | 描述         | 类型       | 默认值 |
-| ------- | ------------ | ---------- | ------ |
-| onClose | 关闭容器     | () => void |        |
-| onClick | 被点击时触发 | () => void |        |
+| 事件    | 描述         | 类型          | 默认值 |
+| ------- | ------------ | ------------- | ------ |
+| onClose | 关闭容器     | () => void |        |
+| onClick | 被点击时触发 | () => void |        |

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

@@ -21,8 +21,8 @@ import BaseDemo from "!!raw-loader!../demo/index.tsx";
 
 ### Events
 
-| 事件      | 描述             | 类型                    | 默认值   |
-| --------- | ---------------- | ----------------------- | -------- |
-| onConfirm | 确定回调         | (val: string[]) => void | () => {} |
-| onCancel  | 取消回调         | () => void              | () => {} |
-| onChange  | 选择选项改变回调 | (val: string[]) => void | () => {} |
+| 事件      | 描述             | 类型                       | 默认值      |
+| --------- | ---------------- | -------------------------- | ----------- |
+| onConfirm | 确定回调         | (val: string[]) => void | () => {} |
+| onCancel  | 取消回调         | () => void              | () => {} |
+| onChange  | 选择选项改变回调 | (val: string[]) => void | () => {} |