@zhenryx/react-native-components 0.0.2 → 0.1.0

package/dist/Dialog/Dialog.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { TextStyle } from 'react-native';
 export interface DialogProps {
-    useModal?: boolean;
     visible: boolean;
     type?: 'alert' | 'confirm';
     title?: string;

package/dist/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAC;AAItE,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AACD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAoDxC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,SAAS,EAAE,MAAM,cAAc,CAAC;AAItE,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AACD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAkDxC,CAAC"}

package/dist/Dialog/Dialog.js

@@ -9,7 +9,7 @@ const react_native_1 = require("react-native");
 const Text_1 = require("../Text/Text");
 const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
 const Popup_1 = require("../Popup/Popup");
-const Dialog = ({ useModal = true, visible = false, type = "alert", title = "提示", content, titleStyle, contentStyle, closeOnOverlayPress = false, round = false, confirmText = "确认", cancelText = '取消', onConfirm = () => null, onCancel = () => null, children }) => {
+const Dialog = ({ visible = false, type = "alert", title = "提示", content, titleStyle, contentStyle, closeOnOverlayPress = false, round = false, confirmText = "确认", cancelText = '取消', onConfirm = () => null, onCancel = () => null, children }) => {
     const { theme } = (0, ThemeConfig_1.useTheme)();
     const confirmTextColor = theme['$primary-color'] || '#e25829ff';
     const paddingHorizontal = theme['$dialog-padding-horizontal'] || 20;
@@ -32,7 +32,7 @@ const Dialog = ({ useModal = true, visible = false, type = "alert", title = "提
         <react_native_1.Pressable style={styles.dialog_footer_button_confirm} onPress={handleConfirm}><Text_1.Text style={[styles.dialog_footer_button_confirm_text, { color: confirmTextColor }]}>{confirmText}</Text_1.Text></react_native_1.Pressable>
       </react_native_1.View>
     </react_native_1.View>);
-    return (<Popup_1.Popup useModal={useModal} visible={visible} closeable={false} closeOnOverlayPress={closeOnOverlayPress} onClose={handleClose} round={round}>
+    return (<Popup_1.Popup visible={visible} closeable={false} closeOnOverlayPress={closeOnOverlayPress} onClose={handleClose} round={round}>
       {renderDialog()}
     </Popup_1.Popup>);
 };

package/dist/Header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAW,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,SAAS,EAAgC,MAAM,cAAc,CAAA;AAIlG,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsDxC,CAAA"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAW,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,SAAS,EAAgC,MAAM,cAAc,CAAA;AAKlG,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwDxC,CAAA"}

package/dist/Header/Header.js

@@ -26,18 +26,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const Text_1 = require("../Text/Text");
 const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
 const Header = ({ title = '自定义头部导航', backGroundColor, leftComponent, centerComponent, rightComponent, containerStyle, titleStyle: customTitleStyle, showBack = true, onBack }) => {
     const { theme } = (0, ThemeConfig_1.useTheme)();
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
     const headerStyle = (0, react_1.useMemo)(() => ({
-        height: theme['$header-height'] || 44,
+        height: (theme['$header-height'] || 44) + insets.top,
+        paddingTop: insets.top,
         backgroundColor: backGroundColor || theme['$header-background'] || 'transparent',
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
         paddingHorizontal: theme['$header-spacing'] || 15,
-    }), [theme, backGroundColor]);
+    }), [theme, backGroundColor, insets.top]);
     const defaultTitleStyle = (0, react_1.useMemo)(() => ({
         fontSize: theme['$header-title-fontsize'] || 18,
         fontWeight: theme['$header-title-fontweight'] || '500'

package/dist/Overlay/Overlay.d.ts

@@ -1,11 +1,10 @@
-import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 export interface OverLayProps {
-    useModal?: boolean;
     children?: React.ReactNode;
     visible: boolean;
     overlayStyle?: StyleProp<ViewStyle>;
-    onOverlayPress?(): void;
+    onOverlayPress?: () => void;
 }
 export declare const OverLay: React.FC<OverLayProps>;
 //# sourceMappingURL=Overlay.d.ts.map

package/dist/Overlay/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,OAAO,EAGL,SAAS,EACT,SAAS,EAIV,MAAM,cAAc,CAAC;AACtB,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,cAAc,CAAC,IAAI,IAAI,CAAC;CACzB;AAGD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAgF1C,CAAC"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAKL,SAAS,EACT,SAAS,EAEV,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA8C1C,CAAC"}

package/dist/Overlay/Overlay.js

@@ -25,68 +25,47 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OverLay = void 0;
 const react_1 = __importStar(require("react"));
-const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
 const react_native_1 = require("react-native");
-const OverLay = ({ useModal = true, children, visible = false, overlayStyle, onOverlayPress, }) => {
+const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
+const OverLay = ({ children, visible, overlayStyle, onOverlayPress, }) => {
     const { theme } = (0, ThemeConfig_1.useTheme)();
-    const [realVisible, setRealVisible] = (0, react_1.useState)(visible);
-    const opacityAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(visible ? 1 : 0)).current;
-    const fadeInstance = (0, react_1.useRef)(null);
+    const [mounted, setMounted] = (0, react_1.useState)(visible);
+    const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(visible ? 1 : 0)).current;
     (0, react_1.useEffect)(() => {
         if (visible) {
-            setRealVisible(true);
-        }
-        if (fadeInstance.current) {
-            fadeInstance.current.stop();
+            setMounted(true);
         }
-        fadeInstance.current = react_native_1.Animated.timing(opacityAnim, {
+        react_native_1.Animated.timing(opacity, {
             toValue: visible ? 1 : 0,
             duration: 250,
+            easing: react_native_1.Easing.out(react_native_1.Easing.cubic),
             useNativeDriver: true,
-        });
-        fadeInstance.current.start(({ finished }) => {
-            if (finished && fadeInstance.current) {
-                fadeInstance.current = null;
-                if (!visible) {
-                    setRealVisible(false);
-                }
+        }).start(({ finished }) => {
+            if (finished && !visible) {
+                setMounted(false);
             }
         });
-        return () => {
-            if (fadeInstance.current) {
-                fadeInstance.current.stop();
-                fadeInstance.current = null;
-            }
-        };
-    }, [visible]);
-    const dynamicBg = theme['$overlay-bg-color'] || 'rgba(0, 0, 0, 0.35)';
-    const containerStyle = (0, react_1.useMemo)(() => [
-        styles.container,
-        { backgroundColor: dynamicBg, opacity: opacityAnim },
-        overlayStyle,
-    ], [dynamicBg, opacityAnim, overlayStyle]);
-    const renderContent = () => (<react_native_1.Animated.View style={containerStyle}>
+    }, [visible, opacity]);
+    if (!mounted)
+        return null;
+    return (<react_native_1.Animated.View style={[
+            react_native_1.StyleSheet.absoluteFill,
+            { backgroundColor: theme['$overlay-bg-color'] ?? 'rgba(0,0,0,0.35)' },
+            { opacity },
+            overlayStyle,
+        ]}>
       {onOverlayPress && (<react_native_1.Pressable style={react_native_1.StyleSheet.absoluteFill} onPress={onOverlayPress}/>)}
       <react_native_1.View style={styles.content} pointerEvents="box-none">
         {children}
       </react_native_1.View>
     </react_native_1.Animated.View>);
-    if (useModal) {
-        return (<react_native_1.Modal visible={realVisible} transparent animationType='none' statusBarTranslucent onRequestClose={onOverlayPress}>
-        {renderContent()}
-      </react_native_1.Modal>);
-    }
-    return realVisible ? renderContent() : null;
 };
 exports.OverLay = OverLay;
+exports.OverLay.displayName = 'OverLay';
 const styles = react_native_1.StyleSheet.create({
-    container: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
-    },
     content: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
-    }
+    },
 });
-exports.OverLay.displayName = 'OverLay';

package/dist/Popup/Popup.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 export interface PopupProps {
-    useModal?: boolean;
     visible?: boolean;
     position?: 'bottom' | 'center' | 'top';
     height?: number;

package/dist/Popup/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAID,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA2JtC,CAAC"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAGL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuHtC,CAAC"}

package/dist/Popup/Popup.js

@@ -25,117 +25,95 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popup = void 0;
 const react_1 = __importStar(require("react"));
-const Overlay_1 = require("../Overlay/Overlay");
 const react_native_1 = require("react-native");
+const Overlay_1 = require("../Overlay/Overlay");
 const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
-const ANIMATION_DURATION = 250;
-const Popup = (props) => {
-    const { useModal = true, visible = false, position = 'center', height, width, round = false, closeable = false, closeOnOverlayPress = false, overlayStyle, style, children, onClose, } = props;
+const DURATION = 250;
+const Popup = ({ visible = false, position = 'center', height, width, round = false, closeable = false, closeOnOverlayPress = false, overlayStyle, style, children, onClose, }) => {
     const { theme } = (0, ThemeConfig_1.useTheme)();
     const radius = theme['$popup-border-radius'] ?? 10;
     const minHeight = theme['$popup-height'] ?? 100;
-    const closeIconWidth = theme['$popup-closeicon-width'] ?? 12;
-    const closeIconHeight = theme['$popup-closeicon-height'] ?? 12;
-    const centerPopRadius = theme['$popup-center-border-radius'] || 10;
-    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    const fadeInstance = (0, react_1.useRef)(null);
-    const [realVisible, setRealVisible] = (0, react_1.useState)(visible);
+    const centerRadius = theme['$popup-center-border-radius'] ?? 10;
+    const closeIconSize = {
+        width: theme['$popup-closeicon-width'] ?? 12,
+        height: theme['$popup-closeicon-height'] ?? 12,
+    };
+    const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(visible ? 1 : 0)).current;
+    const [mounted, setMounted] = (0, react_1.useState)(visible);
     (0, react_1.useEffect)(() => {
-        if (visible) {
-            setRealVisible(true);
-        }
-        if (fadeInstance.current) {
-            fadeInstance.current.stop();
-        }
-        fadeInstance.current = react_native_1.Animated.timing(animatedValue, {
+        if (visible)
+            setMounted(true);
+        react_native_1.Animated.timing(progress, {
             toValue: visible ? 1 : 0,
-            duration: ANIMATION_DURATION,
-            easing: visible ? react_native_1.Easing.out(react_native_1.Easing.cubic) : react_native_1.Easing.in(react_native_1.Easing.cubic),
+            duration: DURATION,
+            easing: visible
+                ? react_native_1.Easing.out(react_native_1.Easing.cubic)
+                : react_native_1.Easing.in(react_native_1.Easing.cubic),
             useNativeDriver: true,
-        });
-        fadeInstance.current.start(({ finished }) => {
-            if (finished && fadeInstance.current) {
-                fadeInstance.current = null;
-                if (!visible) {
-                    setRealVisible(false);
-                }
+        }).start(({ finished }) => {
+            if (finished && !visible) {
+                setMounted(false);
             }
         });
-        return () => {
-            if (fadeInstance.current) {
-                fadeInstance.current.stop();
-                fadeInstance.current = null;
-            }
-        };
-    }, [visible]);
-    const baseStyle = (0, react_1.useMemo)(() => {
-        const base = {
-            backgroundColor: '#fff',
-            ...(height ? { height } : { minHeight }),
-            width: position === 'center' ? width ?? 300 : '100%',
-        };
-        if (position !== 'center') {
-            base.position = 'absolute';
-            base.left = 0;
-            base.right = 0;
-            if (position === 'bottom') {
-                base.bottom = 0;
-            }
-            else {
-                base.top = 0;
-            }
+    }, [visible, progress]);
+    if (!mounted)
+        return null;
+    const baseStyle = {
+        backgroundColor: '#fff',
+        ...(height ? { height } : { minHeight }),
+        width: position === 'center'
+            ? (width ?? 300)
+            : '100%',
+    };
+    if (position !== 'center') {
+        //上弹出层or下弹出层
+        Object.assign(baseStyle, {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            ...(position === 'bottom' ? { bottom: 0 } : { top: 0 }),
+        });
+    }
+    if (round) {
+        if (position === 'center') {
+            baseStyle.borderRadius = centerRadius;
         }
-        if (round) {
-            if (position === 'center') {
-                base.borderRadius = centerPopRadius;
-            }
-            else if (position === 'bottom') {
-                base.borderTopLeftRadius = radius;
-                base.borderTopRightRadius = radius;
-            }
-            else {
-                base.borderBottomLeftRadius = radius;
-                base.borderBottomRightRadius = radius;
-            }
+        else if (position === 'bottom') {
+            baseStyle.borderTopLeftRadius = radius;
+            baseStyle.borderTopRightRadius = radius;
         }
-        return base;
-    }, [position, width, height, minHeight, round, radius, centerPopRadius]);
-    const animatedStyle = (0, react_1.useMemo)(() => {
-        if (position === 'center') {
-            return {
-                opacity: animatedValue
-            };
+        else {
+            baseStyle.borderBottomLeftRadius = radius;
+            baseStyle.borderBottomRightRadius = radius;
         }
-        const distance = height || minHeight;
-        return {
+    }
+    const animatedStyle = position === 'center'
+        ? { opacity: progress }
+        : {
             transform: [
                 {
-                    translateY: animatedValue.interpolate({
+                    translateY: progress.interpolate({
                         inputRange: [0, 1],
-                        outputRange: position === 'bottom' ? [distance, 0] : [-distance, 0],
+                        outputRange: [
+                            position === 'bottom'
+                                ? height ?? minHeight
+                                : -(height ?? minHeight),
+                            0,
+                        ],
                     }),
                 },
             ],
         };
-    }, [position, animatedValue, height, minHeight]);
-    const closeIconStyle = (0, react_1.useMemo)(() => ({
-        width: closeIconWidth,
-        height: closeIconHeight,
-    }), [closeIconWidth, closeIconHeight]);
-    const closeButtonPressableStyle = (0, react_1.useMemo)(() => ({
-        position: 'absolute',
-        right: 10,
-        [position === 'top' ? 'bottom' : 'top']: 10,
-        zIndex: 999,
-    }), [position]);
-    if (!realVisible) {
-        return null;
-    }
-    return (<Overlay_1.OverLay useModal={useModal} visible={realVisible} overlayStyle={overlayStyle} onOverlayPress={closeOnOverlayPress ? onClose : undefined}>
+    return (<Overlay_1.OverLay visible={mounted} overlayStyle={overlayStyle} onOverlayPress={closeOnOverlayPress ? onClose : undefined}>
       <react_native_1.Animated.View style={[baseStyle, animatedStyle, style]}>
         {children}
-        {closeable && (<react_native_1.Pressable hitSlop={15} onPress={onClose} style={closeButtonPressableStyle}>
-            <react_native_1.Image source={require('./assets/icon-close.png')} style={closeIconStyle}/>
+
+        {closeable && (<react_native_1.Pressable hitSlop={15} onPress={onClose} style={{
+                position: 'absolute',
+                right: 10,
+                [position === 'top' ? 'bottom' : 'top']: 10,
+            }}>
+            <react_native_1.Image source={require('./assets/icon-close.png')} style={closeIconSize}/>
           </react_native_1.Pressable>)}
       </react_native_1.Animated.View>
     </Overlay_1.OverLay>);

package/dist/TabView/TabView.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+export interface Tab {
+    id: string;
+    label: string;
+    content?: ReactNode;
+}
+export interface TabViewProps {
+    tabs: Tab[];
+    defaultTab?: string;
+    onTabChange?: (tabId: string) => void;
+    renderContent?: (tab: Tab) => ReactNode;
+}
+export declare const TabView: React.FC<TabViewProps>;
+//# sourceMappingURL=TabView.d.ts.map

package/dist/TabView/TabView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,SAAS,CAAC;CACzC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoE1C,CAAC"}

package/dist/TabView/TabView.js

@@ -0,0 +1,120 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabView = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const TabView = ({ tabs, defaultTab, onTabChange, renderContent, }) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(defaultTab || tabs[0]?.id || '');
+    // 当 defaultTab 或 tabs 变化时，更新 activeTab
+    (0, react_1.useEffect)(() => {
+        if (defaultTab && tabs.some((tab) => tab.id === defaultTab)) {
+            setActiveTab(defaultTab);
+        }
+        else if (tabs.length > 0) {
+            setActiveTab((currentTab) => {
+                // 如果当前 tab 不在 tabs 中，回退到第一个 tab
+                if (!tabs.some((tab) => tab.id === currentTab)) {
+                    return tabs[0].id;
+                }
+                return currentTab;
+            });
+        }
+    }, [defaultTab, tabs]);
+    const handleTabPress = (tabId) => {
+        setActiveTab(tabId);
+        onTabChange?.(tabId);
+    };
+    const activeTabData = tabs.find((tab) => tab.id === activeTab) || tabs[0];
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.tabContainer}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {tabs.map((tab) => (<react_native_1.Pressable key={tab.id} style={styles.tab} onPress={() => handleTabPress(tab.id)}>
+              <react_native_1.Text style={[
+                styles.tabText,
+                activeTab === tab.id && styles.tabTextActive,
+            ]}>
+                {tab.label}
+              </react_native_1.Text>
+              {activeTab === tab.id && <react_native_1.View style={styles.tabIndicator}/>}
+            </react_native_1.Pressable>))}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.contentContainer}>
+        {activeTabData
+            ? renderContent
+                ? renderContent(activeTabData)
+                : activeTabData.content || null
+            : null}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.TabView = TabView;
+exports.TabView.displayName = 'TabView';
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    tabContainer: {
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E7EB',
+        backgroundColor: '#FFFFFF',
+    },
+    tab: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        position: 'relative',
+        minWidth: 70,
+    },
+    tabText: {
+        fontSize: 15,
+        color: '#9CA3AF',
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+    tabTextActive: {
+        color: '#111827',
+        fontWeight: '700',
+        fontSize: 16,
+        transform: [{ scale: 1.1 }],
+    },
+    tabIndicator: {
+        position: 'absolute',
+        bottom: 0,
+        alignSelf: 'center',
+        width: 25,
+        height: 3,
+        backgroundColor: '#EF4444',
+        borderRadius: 2,
+    },
+    contentContainer: {
+        flex: 1,
+        padding: 20,
+    },
+});

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export type { OverLayProps } from './Overlay/Overlay';
 export { Popup } from './Popup/Popup';
 export type { PopupProps } from './Popup/Popup';
 export { Text } from './Text/Text';
+export { TabView } from './TabView/TabView';
+export type { TabViewProps, Tab } from './TabView/TabView';
 export { ThemeProvider, useTheme } from './ThemeConfig/ThemeConfig';
 export type { Theme } from './ThemeConfig/ThemeConfig';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.ThemeProvider = exports.Text = exports.Popup = exports.OverLay = exports.Header = exports.Empty = exports.Dialog = exports.Button = void 0;
+exports.useTheme = exports.ThemeProvider = exports.TabView = exports.Text = exports.Popup = exports.OverLay = exports.Header = exports.Empty = exports.Dialog = exports.Button = void 0;
 var Button_1 = require("./Button/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
 var Dialog_1 = require("./Dialog/Dialog");
@@ -15,6 +15,8 @@ var Popup_1 = require("./Popup/Popup");
 Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return Popup_1.Popup; } });
 var Text_1 = require("./Text/Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
+var TabView_1 = require("./TabView/TabView");
+Object.defineProperty(exports, "TabView", { enumerable: true, get: function () { return TabView_1.TabView; } });
 var ThemeConfig_1 = require("./ThemeConfig/ThemeConfig");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeConfig_1.ThemeProvider; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return ThemeConfig_1.useTheme; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenryx/react-native-components",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -27,10 +27,12 @@
   "devDependencies": {
     "@types/react": "18.2.0",
     "@types/react-native": "0.70.0",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "react-native-safe-area-context": "^4.8.0"
   },
   "peerDependencies": {
     "react": ">=18.1.0",
-    "react-native": ">=0.70.0"
+    "react-native": ">=0.70.0",
+    "react-native-safe-area-context": ">=4.0.0"
   }
 }