@xhsreds/reds-rn-next 0.1.3 → 0.1.4

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/components/Alert/Alert.tsx","../../src/components/List/ListItem/ListItem.tsx","../../src/components/ImagePreview/ImagePreview.tsx","../../src/components/AvatarGroup/AvatarGroup.tsx","../../src/index.ts"],"sourcesContent":["import React, { useState, useEffect, useCallback, useRef } from \"react\";\nimport {\n  View,\n  Text,\n  Modal,\n  Image,\n  ScrollView,\n  TouchableWithoutFeedback,\n  StyleSheet,\n  GestureResponderEvent,\n  Animated,\n} from \"react-native\";\nimport { RedsAlert, AlertDefaultProps } from \"./interface\";\nimport { Button, Divider, Portal } from \"../../index\";\nimport { style } from \"./styles\";\n\n// const scrollViewMask = {\n//   default: \"https://picasso-static.xiaohongshu.com/fe-platform/d3fab8f89c0d2daa69ecaa87580c8ff42f330a80.png\",\n//   dark: \"https://picasso-static.xiaohongshu.com/fe-platform/953a4a587c93dadda6f4ded4f732c50cf703ac99.png\",\n// };\nconst Alert: React.FC<RedsAlert> = (props) => {\n  const finalProps = { ...AlertDefaultProps, ...props };\n  const {\n    show,\n    title,\n    message,\n    confirmText,\n    cancelText,\n    onConfirm,\n    onCancel,\n    onOpen,\n    onClose,\n    align,\n    // showScrollOverlay,\n    footerLayout,\n    showConfirmButton,\n    showCancelButton,\n    mask,\n    footerType,\n    header,\n    footer,\n    children,\n  } = finalProps;\n\n  const styles = style(props);\n  // const [hasScrollToBottom, setHasScrollToBottom] = useState(true);\n  const fadeAnim = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    if (show && onOpen) onOpen();\n    if (!show && onClose) onClose();\n  }, [show]);\n\n  const handleConfirm = (e: GestureResponderEvent) => {\n    if (onConfirm) onConfirm(e);\n  };\n\n  const handleCancel = (e: GestureResponderEvent) => {\n    if (onCancel) onCancel(e);\n  };\n\n  // const handleScrollView = useCallback(\n  //   (e: any) => {\n  //     const offsetY = e.nativeEvent.contentOffset.y;\n  //     const contentSizeHeight = e.nativeEvent.contentSize.height;\n  //     var containerScrollHeight = e.nativeEvent.layoutMeasurement.height;\n  //     if (offsetY + containerScrollHeight + 30 >= contentSizeHeight) {\n  //       if (hasScrollToBottom) setHasScrollToBottom(false);\n  //     } else {\n  //       if (!hasScrollToBottom) setHasScrollToBottom(true);\n  //     }\n  //   },\n  //   [hasScrollToBottom],\n  // );\n\n  // const [canScroll, setCanScroll] = useState(false);\n\n  // const handleContentSizeChange = (contentWidth: number, contentHeight: number) => {\n  //   if (contentHeight > 135) {\n  //     setCanScroll(true);\n  //   } else {\n  //     setCanScroll(false);\n  //   }\n  // };\n\n  return show ? (\n    <Portal>\n      {mask && (\n        <TouchableWithoutFeedback>\n          <View style={styles.modalOverlay} />\n        </TouchableWithoutFeedback>\n      )}\n      <Animated.View\n        style={[\n          styles.centeredView,\n          {\n            transform: [\n              {\n                scale: fadeAnim.interpolate({\n                  inputRange: [0, 1],\n                  outputRange: [1, 1],\n                }),\n              },\n            ],\n          },\n        ]}\n      >\n        <View style={[styles.alertContainer]}>\n          {header}\n          <View style={styles.alertContent}>\n            <Text style={styles.title}>{title}</Text>\n            {message ? (\n              <ScrollView\n                // onContentSizeChange={handleContentSizeChange}\n                // onScroll={handleScrollView}\n                style={[styles.message]}\n                scrollEventThrottle={16}\n              >\n                <Text style={[styles.messageText, align === \"left\" && styles.messageLeft]}>{message}</Text>\n              </ScrollView>\n            ) : (\n              children\n            )}\n            {/* {showScrollOverlay && hasScrollToBottom && canScroll ? (\n              <Image source={{ uri: scrollViewMask.default }} style={styles.scrollOverlay} />\n            ) : null} */}\n          </View>\n          {footer ? (\n            footer\n          ) : (\n            <View\n              style={[\n                styles.footer,\n                footerLayout === \"vertical\" ? styles.footerVertical : styles.footerHorizontal,\n                footerType === \"text\" && styles.footerText,\n              ]}\n            >\n              {showCancelButton && (\n                <Button\n                  variant={footerType === \"text\" ? \"text\" : \"outline\"}\n                  onClick={handleCancel}\n                  style={footerLayout === \"vertical\" ? styles.verButton : styles.button}\n                >\n                  {cancelText}\n                </Button>\n              )}\n              {footerType === \"text\" && showCancelButton && footerLayout !== \"vertical\" && (\n                <View style={styles.dividerBox}>\n                  <Divider direction={\"vertical\"} size={24} />\n                </View>\n              )}\n              {showConfirmButton && (\n                <Button\n                  type=\"primary\"\n                  variant={footerType === \"text\" ? \"text\" : \"fill\"}\n                  onClick={handleConfirm}\n                  style={footerType === \"text\" || footerLayout === \"vertical\" ? styles.button : styles.confirmButton}\n                >\n                  {confirmText}\n                </Button>\n              )}\n            </View>\n          )}\n        </View>\n      </Animated.View>\n    </Portal>\n  ) : null;\n};\n\nexport default Alert;\n","import React, { useEffect, useRef, useState, ReactNode } from \"react\";\nimport { View, Text, ViewStyle, Image } from \"react-native\";\nimport { useListContext } from \"./ListContext\";\nimport styles from \"../styles\";\nimport { Icon } from \"../../../index\";\nimport { ArrowRight } from \"@xhs/reder-icon-svg\";\n\nexport interface RedsListItem {\n  title: string;\n  subtitle?: string;\n  actionText?: string;\n  size?: \"regular\" | \"expand\";\n  arrow?: boolean;\n  prefix?: ReactNode;\n  action?: ReactNode;\n}\n\nconst ListItem: React.FC<RedsListItem> = ({\n  title,\n  subtitle,\n  actionText,\n  size = \"regular\",\n  arrow = false,\n  prefix,\n  action,\n}) => {\n  const { registerChild, unregisterChild } = useListContext();\n  const [lineItem, setLineItem] = useState(false);\n\n  const childInfo = {\n    setLine: (value: boolean) => setLineItem(value),\n  };\n\n  useEffect(() => {\n    registerChild(childInfo);\n    return () => unregisterChild(childInfo);\n  }, []);\n\n  const listItemSizeToHeight = {\n    regular: 48,\n    expand: 60,\n  };\n\n  return (\n    <View style={[styles.listItem, { height: listItemSizeToHeight[size] }, size === \"expand\" && styles.expand]}>\n      {prefix && <View style={styles.prefix}>{prefix}</View>}\n      <View style={styles.contentBox}>\n        <View style={styles.contentContainer}>\n          <View style={styles.textContainer}>\n            <Text style={styles.title}>{title}</Text>\n            {size === \"expand\" && subtitle && <Text style={styles.subtitle}>{subtitle}</Text>}\n          </View>\n          <View style={styles.tailContainer}>\n            {action ? (\n              <View style={styles.tail}>{action}</View>\n            ) : (\n              <View style={styles.tail}>\n                <Text style={styles.tailText}>{actionText}</Text>\n                {arrow && <Icon size={18} fill={\"rgba(0, 0, 0, 0.27)\"} icon={ArrowRight} />}\n              </View>\n            )}\n          </View>\n        </View>\n        {lineItem && <View style={styles.hr}></View>}\n      </View>\n    </View>\n  );\n};\n\nexport default ListItem;\n","import React, { useState, useRef, useEffect, useMemo, useCallback } from \"react\";\nimport { View, Text, TouchableWithoutFeedback, Animated, GestureResponderEvent, PanResponder } from \"react-native\";\nimport { RedsImagePreview, ImagePreviewDefaultProps } from \"./interface/index\";\nimport styles from \"./styles\";\nimport ImageContainer from \"./ImageContainer\";\nimport ImageViewer from \"./ImageViewer\";\n// import ImageViewer2 from \"./ImageViewer2\";\nimport { Image } from \"../../\";\n// import { GestureHandlerRootView } from \"react-native-gesture-handler\";\n\nconst ImagePreview = ({ removePortal }: any) => {\n  return (\n    <View\n      style={{\n        position: \"absolute\",\n        backgroundColor: \"#00000033\",\n        width: \"100%\",\n        height: \"100%\",\n      }}\n    >\n      <ImageViewer onClose={removePortal}>\n        <Image\n          width=\"100%\"\n          height=\"100%\"\n          resizeMode=\"contain\"\n          src=\"https://picasso-static.xiaohongshu.com/fe-platform/167754d83b112dc155edd2ae5dc7f9ced481bba3.webp\"\n        />\n      </ImageViewer>\n    </View>\n  );\n};\n\nImagePreview.defaultProps = ImagePreviewDefaultProps;\n\nexport default ImagePreview;\n","import React, { useMemo, FC, useRef, memo, forwardRef } from \"react\";\nimport { View, StyleSheet, Animated } from \"react-native\";\nimport { RedsAvatarGroup, AvatarGroupDefaultProps } from \"./interface\";\nimport { Avatar } from \"../../index\";\nimport { lightColor, typography, alwaysColor } from \"@xhsreds/reds-token-next\";\n\nconst AvatarGroup = (props: RedsAvatarGroup, ref: any) => {\n  const { size = AvatarGroupDefaultProps.size, avatars = [], avatarProps, maxCount, groupStyle = {} } = props;\n\n  const styles = {\n    outContainer: {\n      flexDirection: \"row\" as \"row\",\n    },\n    avatarContainerStyle: {\n      marginRight:\n        typeof size === \"number\" ? (size > 20 ? -4 : -2) : ((size === \"large\" || size === \"xlarge\") && -4) || -2,\n    },\n  };\n\n  const avatarList = useMemo(() => {\n    let renderAvatars = [];\n    const count = maxCount ? Math.min(avatars.length, maxCount) : avatars.length;\n    for (let index = 0; index < count; index++) {\n      renderAvatars.push(\n        <Avatar\n          key={index}\n          size={size}\n          imageUrl={avatars[index]?.url ? avatars[index]?.url : avatars[index]}\n          containerStyle={StyleSheet.flatten([styles.avatarContainerStyle, { zIndex: -index }])}\n          borderNum={0.5}\n          outlineColor={lightColor.White}\n          type={\"live\"}\n          showTag={false}\n          {...avatarProps}\n        />,\n      );\n    }\n    return renderAvatars;\n  }, [size, avatars, groupStyle, maxCount, avatarProps]);\n\n  return (\n    <View ref={ref} style={StyleSheet.flatten([styles.outContainer, groupStyle])}>\n      {avatarList}\n    </View>\n  );\n};\n\nexport default memo(forwardRef(AvatarGroup));\n","declare global {\n  var GLOBAL: any;\n}\ntry {\n  if (typeof GLOBAL !== \"undefined\" && GLOBAL?.eaglet) {\n    GLOBAL?.eaglet?.push?.({\n      measurement_name: \"reds_component_usage\",\n      measurement_data: {\n        platform: \"rn\",\n      },\n    });\n  }\n} catch (e) {}\n\nexport * from \"./components/ActionSheets\";\nexport * from \"./components/Silder\";\nexport * from \"./components/Sheets\";\nexport * from \"./components/PickerView\";\nexport * from \"./components/Picker\";\nexport * from \"./components/Alert\";\nexport * from \"./components/FAB\";\nexport * from \"./components/Toast\";\nexport * from \"./components/DropDown\";\nexport * from \"./components/Progress\";\nexport * from \"./components/TabBar\";\nexport * from \"./components/NavigationBar\";\nexport * from \"./components/BottomBar\";\nexport * from \"./components/List\";\nexport * from \"./components/Skeleton\";\nexport * from \"./components/ProgressIndicator\";\nexport * from \"./components/ImagePreview\";\nexport * from \"./components/Divider\";\nexport * from \"./components/Portal\";\nexport * from \"./components/Tag\";\nexport * from \"./components/Image\";\nexport * from \"./components/Button\";\nexport * from \"./components/Popover\";\nexport * from \"./components/Switch\";\nexport * from \"./components/ConfigProvider\";\nexport * from \"./components/Text\";\nexport * from \"./components/Collapse\";\nexport * from \"./components/Empty\";\nexport * from \"./components/Result\";\nexport * from \"./components/PullRefresh\";\nexport * from \"./components/Icon\";\nexport * from \"./components/Badge\";\nexport * from \"./components/Avatar\";\nexport * from \"./components/AvatarGroup\";\nexport * from \"./components/Tab\";\n"],"names":["Alert","props","finalProps","_objectSpread","AlertDefaultProps","show","title","message","confirmText","cancelText","onConfirm","onCancel","onOpen","onClose","align","footerLayout","showConfirmButton","showCancelButton","mask","footerType","header","footer","children","styles","style","fadeAnim","useRef","Animated","Value","current","useEffect","handleConfirm","e","handleCancel","React","createElement","Portal","TouchableWithoutFeedback","View","modalOverlay","centeredView","transform","scale","interpolate","inputRange","outputRange","alertContainer","alertContent","Text","ScrollView","scrollEventThrottle","messageText","messageLeft","footerVertical","footerHorizontal","footerText","Button","variant","onClick","verButton","button","dividerBox","Divider","direction","size","type","confirmButton","ListItem","_ref","subtitle","actionText","_ref$size","_ref$arrow","arrow","prefix","action","_useListContext","useListContext","registerChild","unregisterChild","_useState","useState","_useState2","_slicedToArray","lineItem","setLineItem","childInfo","setLine","value","listItemSizeToHeight","regular","expand","listItem","height","contentBox","contentContainer","textContainer","tailContainer","tail","tailText","Icon","fill","icon","ArrowRight","hr","ImagePreview","removePortal","position","backgroundColor","width","ImageViewer","Image","resizeMode","src","defaultProps","ImagePreviewDefaultProps","AvatarGroup","ref","_props$size","AvatarGroupDefaultProps","_props$avatars","avatars","avatarProps","maxCount","_props$groupStyle","groupStyle","outContainer","flexDirection","avatarContainerStyle","marginRight","avatarList","useMemo","renderAvatars","count","Math","min","length","index","_avatars$index","_avatars$index2","push","Avatar","key","imageUrl","url","containerStyle","StyleSheet","flatten","zIndex","borderNum","outlineColor","lightColor","White","showTag","memo","forwardRef","_GLOBAL","GLOBAL","eaglet","_GLOBAL2","_GLOBAL2$push","call","measurement_name","measurement_data","platform"],"mappings":"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"}

package/lib/types/components/Alert/Alert.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { RedsAlert } from "./interface";
+declare const Alert: React.FC<RedsAlert>;
+export default Alert;

package/lib/types/components/Alert/demo/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export default function App(): React.JSX.Element;

package/lib/types/components/Alert/index.d.ts

@@ -0,0 +1,4 @@
+import Alert from "./Alert";
+import * as AlertType from "./interface";
+export default Alert;
+export { Alert, AlertType };

package/lib/types/components/Alert/interface/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { GestureResponderEvent } from "react-native";
+export interface RedsAlert {
+    show: boolean;
+    title?: string;
+    message?: string;
+    align?: "left" | "center";
+    footerLayout?: "horizontal" | "vertical";
+    showConfirmButton?: boolean;
+    showCancelButton?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    mask?: boolean;
+    footerType?: "text" | "button";
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    onConfirm?: (value: GestureResponderEvent) => void;
+    onCancel?: (value: GestureResponderEvent) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+export interface RedsAlertEvent {
+}
+export declare const AlertDefaultProps: {
+    show: boolean;
+    align: string;
+    footerLayout: string;
+    showConfirmButton: boolean;
+    showCancelButton: boolean;
+    confirmText: string;
+    cancelText: string;
+    mask: boolean;
+    footerType: string;
+};

package/lib/types/components/Alert/styles.d.ts

@@ -0,0 +1,108 @@
+import { RedsAlert } from "./interface";
+export declare const style: (props: RedsAlert) => {
+    modalOverlay: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        backgroundColor: string;
+    };
+    centeredView: {
+        position: "absolute";
+        top: number;
+        left: number;
+        right: number;
+        bottom: number;
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    alertContainer: {
+        width: number;
+        backgroundColor: string;
+        borderRadius: number;
+        overflow: "hidden";
+        boxShadow: string;
+    };
+    alertContent: {
+        padding: number;
+    };
+    title: {
+        textAlign: "center";
+        marginBottom: number;
+        fontSize: number;
+        fontWeight: "400" | "500" | "600" | "700";
+        lineHeight: number;
+    };
+    message: {
+        maxHeight: number;
+        overflow: "hidden";
+        position: "relative";
+    };
+    messageText: {
+        fontSize: number;
+        color: string;
+        textAlign: "center";
+        lineHeight: number;
+        fontWeight: "400" | "500" | "600" | "700";
+    };
+    messageLeft: {
+        textAlign: "left";
+    };
+    scrollOverlay: {
+        width: "100%";
+        position: "absolute";
+        left: number;
+        right: number;
+        bottom: number;
+        height: number;
+    };
+    footer: {
+        width: "100%";
+        height: number;
+        flexDirection: "row";
+        justifyContent: "space-between";
+        padding: number;
+        paddingTop: number;
+    };
+    footerText: {
+        borderTopWidth: number;
+        borderTopColor: string;
+        padding: number;
+        paddingBottom: number;
+        paddingTop: number;
+    };
+    footerHorizontal: {
+        flexDirection: "row";
+    };
+    footerVertical: {
+        flexDirection: "column-reverse";
+        justifyContent: "center";
+        alignItems: "center";
+        height: number;
+    };
+    button: {
+        flex: number;
+        width: "100%";
+        margin: number;
+        height: number;
+    };
+    dividerBox: {
+        marginTop: number;
+    };
+    confirmButton: {
+        flex: number;
+        margin: number;
+        marginLeft: number;
+        width: "100%";
+        height: number;
+    };
+    verButton: {
+        flex: number;
+        width: "100%";
+        margin: number;
+        marginTop: number;
+        height: number;
+    };
+};

package/lib/types/components/Alert/test/index.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Alert/test/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/components/Alert/test/paper.bench.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/index.d.ts

@@ -1,8 +1,12 @@
+declare global {
+    var GLOBAL: any;
+}
 export * from "./components/ActionSheets";
 export * from "./components/Silder";
 export * from "./components/Sheets";
 export * from "./components/PickerView";
 export * from "./components/Picker";
+export * from "./components/Alert";
 export * from "./components/FAB";
 export * from "./components/Toast";
 export * from "./components/DropDown";

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@xhsreds/reds-rn-next",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "author": "贾斌(呀哈) <jiabin@xiaohongshu.com>",
   "license": "ISC",
   "dependencies": {
     "@floating-ui/react-native": "~0.10.6",
     "dayjs": "^1.10.7",
-    "@xhsreds/reds-token-next": "0.1.2"
+    "@xhsreds/reds-token-next": "0.1.3"
   },
   "peerDependencies": {
     "@xhs/reder-icon-svg": "~1.0.1",

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import {
+  View,
+  Text,
+  Modal,
+  Image,
+  ScrollView,
+  TouchableWithoutFeedback,
+  StyleSheet,
+  GestureResponderEvent,
+  Animated,
+} from "react-native";
+import { RedsAlert, AlertDefaultProps } from "./interface";
+import { Button, Divider, Portal } from "../../index";
+import { style } from "./styles";
+
+// const scrollViewMask = {
+//   default: "https://picasso-static.xiaohongshu.com/fe-platform/d3fab8f89c0d2daa69ecaa87580c8ff42f330a80.png",
+//   dark: "https://picasso-static.xiaohongshu.com/fe-platform/953a4a587c93dadda6f4ded4f732c50cf703ac99.png",
+// };
+const Alert: React.FC<RedsAlert> = (props) => {
+  const finalProps = { ...AlertDefaultProps, ...props };
+  const {
+    show,
+    title,
+    message,
+    confirmText,
+    cancelText,
+    onConfirm,
+    onCancel,
+    onOpen,
+    onClose,
+    align,
+    // showScrollOverlay,
+    footerLayout,
+    showConfirmButton,
+    showCancelButton,
+    mask,
+    footerType,
+    header,
+    footer,
+    children,
+  } = finalProps;
+
+  const styles = style(props);
+  // const [hasScrollToBottom, setHasScrollToBottom] = useState(true);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (show && onOpen) onOpen();
+    if (!show && onClose) onClose();
+  }, [show]);
+
+  const handleConfirm = (e: GestureResponderEvent) => {
+    if (onConfirm) onConfirm(e);
+  };
+
+  const handleCancel = (e: GestureResponderEvent) => {
+    if (onCancel) onCancel(e);
+  };
+
+  // const handleScrollView = useCallback(
+  //   (e: any) => {
+  //     const offsetY = e.nativeEvent.contentOffset.y;
+  //     const contentSizeHeight = e.nativeEvent.contentSize.height;
+  //     var containerScrollHeight = e.nativeEvent.layoutMeasurement.height;
+  //     if (offsetY + containerScrollHeight + 30 >= contentSizeHeight) {
+  //       if (hasScrollToBottom) setHasScrollToBottom(false);
+  //     } else {
+  //       if (!hasScrollToBottom) setHasScrollToBottom(true);
+  //     }
+  //   },
+  //   [hasScrollToBottom],
+  // );
+
+  // const [canScroll, setCanScroll] = useState(false);
+
+  // const handleContentSizeChange = (contentWidth: number, contentHeight: number) => {
+  //   if (contentHeight > 135) {
+  //     setCanScroll(true);
+  //   } else {
+  //     setCanScroll(false);
+  //   }
+  // };
+
+  return show ? (
+    <Portal>
+      {mask && (
+        <TouchableWithoutFeedback>
+          <View style={styles.modalOverlay} />
+        </TouchableWithoutFeedback>
+      )}
+      <Animated.View
+        style={[
+          styles.centeredView,
+          {
+            transform: [
+              {
+                scale: fadeAnim.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [1, 1],
+                }),
+              },
+            ],
+          },
+        ]}
+      >
+        <View style={[styles.alertContainer]}>
+          {header}
+          <View style={styles.alertContent}>
+            <Text style={styles.title}>{title}</Text>
+            {message ? (
+              <ScrollView
+                // onContentSizeChange={handleContentSizeChange}
+                // onScroll={handleScrollView}
+                style={[styles.message]}
+                scrollEventThrottle={16}
+              >
+                <Text style={[styles.messageText, align === "left" && styles.messageLeft]}>{message}</Text>
+              </ScrollView>
+            ) : (
+              children
+            )}
+            {/* {showScrollOverlay && hasScrollToBottom && canScroll ? (
+              <Image source={{ uri: scrollViewMask.default }} style={styles.scrollOverlay} />
+            ) : null} */}
+          </View>
+          {footer ? (
+            footer
+          ) : (
+            <View
+              style={[
+                styles.footer,
+                footerLayout === "vertical" ? styles.footerVertical : styles.footerHorizontal,
+                footerType === "text" && styles.footerText,
+              ]}
+            >
+              {showCancelButton && (
+                <Button
+                  variant={footerType === "text" ? "text" : "outline"}
+                  onClick={handleCancel}
+                  style={footerLayout === "vertical" ? styles.verButton : styles.button}
+                >
+                  {cancelText}
+                </Button>
+              )}
+              {footerType === "text" && showCancelButton && footerLayout !== "vertical" && (
+                <View style={styles.dividerBox}>
+                  <Divider direction={"vertical"} size={24} />
+                </View>
+              )}
+              {showConfirmButton && (
+                <Button
+                  type="primary"
+                  variant={footerType === "text" ? "text" : "fill"}
+                  onClick={handleConfirm}
+                  style={footerType === "text" || footerLayout === "vertical" ? styles.button : styles.confirmButton}
+                >
+                  {confirmText}
+                </Button>
+              )}
+            </View>
+          )}
+        </View>
+      </Animated.View>
+    </Portal>
+  ) : null;
+};
+
+export default Alert;

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

@@ -0,0 +1,234 @@
+import React, { useState } from "react";
+import { View, Text, StyleSheet, GestureResponderEvent, ScrollView, Image } from "react-native";
+import { Alert, PortalProvider } from "@xhs/reds-rn-next";
+import { Button, Icon, useThemeColor } from "@xhs/reds-rn-next";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+    marginBottom: 800,
+  },
+  buttonContainer: {
+    marginVertical: 10,
+    width: "100%",
+    alignItems: "center",
+  },
+  footer: {
+    flex: 1,
+    // padding: 20,
+    // paddingTop: 0,
+    // flexDirection: "column-reverse",
+    // height: 100,
+  },
+});
+
+export default function App() {
+  const [alertVisible, setAlertVisible] = useState(false);
+  const [footerType, setFooterType] = useState<"button" | "text">("button");
+  const [showCancelButton, setShowCancelButton] = useState(true);
+
+  const [alertTitle, setAlertTitle] = useState<string | undefined>("提示");
+  const [alertMessage, setAlertMessage] = useState<string | undefined>(
+    "这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容这是一个自定义消息内容",
+  );
+  const [align, setAlign] = useState<"left" | "center">("center");
+  const [footerLayout, setFooterLayout] = useState<"horizontal" | "vertical">("horizontal");
+  const themeColor = useThemeColor("Icon");
+  const [mediaSrc, setMediaSrc] = useState<string>("");
+  const [footer, setFooter] = useState<React.ReactNode | undefined>(undefined);
+  const [header, setHeader] = useState<React.ReactNode | undefined>(undefined);
+  const [customMessage, setCustomMessage] = useState(false);
+
+  const showAlert = () => {
+    setAlertVisible(true);
+  };
+
+  const hideAlert = () => {
+    setAlertVisible(false);
+
+    // 重置状态
+    setFooterType("button");
+    setFooterLayout("horizontal");
+    setAlign("center");
+    setAlertTitle("提示");
+    setAlertMessage("这是一个消息内容");
+    setShowCancelButton(true);
+    setFooter(undefined);
+    setHeader(undefined);
+    setCustomMessage(false);
+  };
+
+  const handleConfirm = (e: GestureResponderEvent) => {
+    console.log("确认按钮点击", e);
+    hideAlert();
+  };
+
+  const handleCancel = (e: GestureResponderEvent) => {
+    console.log("取消按钮点击", e);
+    hideAlert();
+  };
+
+  const handleOpen = () => {
+    console.log("Alert 打开");
+  };
+
+  const handleClose = () => {
+    console.log("Alert 关闭");
+  };
+
+  const changeFoolterType = () => {
+    setFooterType("text");
+  };
+
+  const renderCusFooter = () => {
+    return (
+      <View style={{ padding: 20 }}>
+        <Button onClick={handleCancel} type="primary">
+          自定义footer
+        </Button>
+      </View>
+    );
+  };
+  const renderCusHeader = () => {
+    return (
+      <View style={{}}>
+        <Image
+          source={{ uri: "https://fe-platform.xhscdn.com/platform/104101l0316gv8eebgm06cj00vk900000000000eiv941q" }}
+          style={{ width: 270, height: 100 }}
+        />
+      </View>
+    );
+  };
+
+  return (
+    <PortalProvider>
+      <ScrollView>
+        <View style={styles.container}>
+          <View style={styles.buttonContainer}>
+            <Button onClick={showAlert} type="primary" variant="fill">
+              显示基础Alert
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setAlertTitle("提示");
+                setAlertMessage("不显示取消按钮的alert");
+                setFooterLayout("horizontal");
+                setShowCancelButton(false);
+                showAlert();
+              }}
+              type="primary"
+              variant="outline"
+            >
+              不显示取消按钮的alert
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setAlertTitle("标题");
+                setAlertMessage("文本按钮样式");
+                setFooterLayout("horizontal");
+                changeFoolterType();
+                showAlert();
+              }}
+              type="primary"
+              variant="ghost"
+            >
+              文本按钮样式
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setAlertTitle("提示");
+                setAlertMessage(
+                  "欢迎来到小红书！ 请您充分阅读和理解《用户协议》和《隐私政策》，以及本提示的全部内容。点击“同意”按钮即代表您已同意前述协议全部条款以及以下约定。 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权 1.为给您提供发布服务，我们可能会申请手机存储权限、摄像头权限、麦克风权",
+                );
+                setFooterLayout("horizontal");
+                setAlign("left");
+                showAlert();
+              }}
+              type="primary"
+              variant="ghost"
+            >
+              内容可滚动
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setAlertTitle("标题");
+                setAlertMessage("文本");
+                setFooterLayout("vertical");
+                changeFoolterType();
+                setFooter(renderCusFooter());
+                showAlert();
+              }}
+              type="primary"
+              variant="ghost"
+            >
+              自定义footer
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setHeader(renderCusHeader());
+                showAlert();
+              }}
+              type="primary"
+              variant="ghost"
+            >
+              自定义header
+            </Button>
+          </View>
+
+          <View style={styles.buttonContainer}>
+            <Button
+              onClick={() => {
+                setCustomMessage(true);
+                setAlertMessage("");
+                showAlert();
+              }}
+              type="primary"
+              variant="ghost"
+            >
+              自定义message
+            </Button>
+          </View>
+
+          <Alert
+            show={alertVisible}
+            title={alertTitle}
+            message={alertMessage}
+            align={align}
+            confirmText="确认"
+            cancelText="取消"
+            onConfirm={handleConfirm}
+            onCancel={handleCancel}
+            onOpen={handleOpen}
+            onClose={handleClose}
+            footerLayout={footerLayout}
+            showConfirmButton
+            showCancelButton={showCancelButton}
+            footerType={footerType}
+            footer={footer}
+            header={header}
+          >
+            {customMessage && <Text>这是一个自定义message</Text>}
+          </Alert>
+        </View>
+      </ScrollView>
+    </PortalProvider>
+  );
+}