react-native-x-components 0.1.0

package/dist/XProviders/usageExample.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { XButton } from '../XButton';
+import { useXTheme } from '../theme';
+import { XImagePreviewProvider, XImagePreviewService, XLoadingModalProvider, XLoadingModalService, XToastProvider, XToastService, } from './';
+/** 在线演示图片（picsum 随机图床） */
+const ONLINE_IMAGES = [
+    'https://picsum.photos/id/1015/1200/800',
+    'https://picsum.photos/id/1016/1200/800',
+    'https://picsum.photos/id/1018/1200/800',
+    'https://picsum.photos/id/1024/1200/800',
+];
+/** 演示区块 */
+const Section = ({ title, description, children }) => {
+    const theme = useXTheme();
+    return (_jsxs(View, { style: [styles.section, { backgroundColor: theme.colorBgContainer, borderRadius: theme.borderRadiusXL }], children: [_jsx(Text, { style: [styles.sectionTitle, { color: theme.colorText }], children: title }), !!description && _jsx(Text, { style: [styles.sectionDesc, { color: theme.colorTextSecondary }], children: description }), _jsx(View, { style: styles.sectionBody, children: children })] }));
+};
+const XProvidersDemo = () => {
+    const theme = useXTheme();
+    // ---- XToast ----
+    const showToast = (type) => {
+        const map = {
+            success: '保存成功',
+            error: '网络错误，请重试',
+            info: '当前版本 v2.3.1',
+            warning: '存储空间不足',
+            loading: '正在加载...',
+            text: '这是一条纯文本 Toast',
+        };
+        XToastService.show({ message: map[type], type });
+    };
+    // ---- XLoadingModal ----
+    const showLoadingOnce = () => {
+        XLoadingModalService.show({ title: '加载中...' });
+        setTimeout(() => XLoadingModalService.hide(), 2000);
+    };
+    /** 并发场景：两个 show + 两个 hide，验证引用计数（弹窗不会提前消失） */
+    const showLoadingConcurrent = () => {
+        XLoadingModalService.show({ title: '第一步...' });
+        setTimeout(() => XLoadingModalService.show({ title: '第二步...' }), 600);
+        setTimeout(() => XLoadingModalService.hide(), 1500);
+        // 第二个 hide（2.6s）之前，第一步的 hide 不会让弹窗提前关闭
+        setTimeout(() => XLoadingModalService.hide(), 2600);
+    };
+    // ---- XImagePreview ----
+    const previewImages = (initialIndex) => {
+        XImagePreviewService.show({ images: ONLINE_IMAGES, initialIndex });
+    };
+    return (_jsx(SafeAreaProvider, { children: _jsx(XLoadingModalProvider, { children: _jsx(XImagePreviewProvider, { children: _jsx(XToastProvider, { children: _jsxs(ScrollView, { style: [styles.screen, { backgroundColor: theme.colorBgLayout }], contentContainerStyle: styles.content, children: [_jsxs(Section, { title: 'XToast \u8F7B\u63D0\u793A', description: '\u6DF1\u8272\u80F6\u56CA + \u8BED\u4E49\u56FE\u6807\uFF0C\u652F\u6301 top / center / bottom \u4E09\u4E2A\u4F4D\u7F6E', children: [_jsxs(View, { style: styles.row, children: [_jsx(XButton, { type: 'primary', size: 'small', onPress: () => showToast('success'), children: "\u6210\u529F" }), _jsx(XButton, { type: 'primary', danger: true, size: 'small', onPress: () => showToast('error'), children: "\u5931\u8D25" }), _jsx(XButton, { type: 'primary', size: 'small', onPress: () => showToast('info'), children: "\u4FE1\u606F" }), _jsx(XButton, { type: 'primary', size: 'small', onPress: () => showToast('warning'), children: "\u8B66\u544A" })] }), _jsxs(View, { style: styles.row, children: [_jsx(XButton, { size: 'small', onPress: () => showToast('loading'), children: "\u52A0\u8F7D\u4E2D" }), _jsx(XButton, { size: 'small', onPress: () => showToast('text'), children: "\u7EAF\u6587\u672C" }), _jsx(XButton, { size: 'small', onPress: () => XToastService.show({ message: '我是顶部 Toast', type: 'info', position: 'top' }), children: "\u9876\u90E8" }), _jsx(XButton, { size: 'small', onPress: () => XToastService.show({ message: '我是居中 Toast', type: 'info', position: 'center' }), children: "\u5C45\u4E2D" })] })] }), _jsx(Section, { title: 'XLoadingModal \u5168\u5C40\u52A0\u8F7D', description: 'show/hide \u5E26\u5F15\u7528\u8BA1\u6570\uFF0C\u5E76\u53D1\u8BF7\u6C42\u4E0D\u4F1A\u4E92\u76F8\u6253\u65AD', children: _jsxs(View, { style: styles.row, children: [_jsx(XButton, { type: 'primary', size: 'small', onPress: showLoadingOnce, children: "\u5355\u6B21\u52A0\u8F7D 2s" }), _jsx(XButton, { type: 'primary', size: 'small', onPress: showLoadingConcurrent, children: "\u5E76\u53D1\u52A0\u8F7D\u6F14\u793A" })] }) }), _jsx(Section, { title: 'XImagePreview \u56FE\u7247\u9884\u89C8', description: '\u5728\u7EBF\u56FE\u7247\u6F14\u793A\uFF0C\u53CC\u6307\u7F29\u653E / \u5DE6\u53F3\u7FFB\u9875 / \u70B9\u51FB\u5173\u95ED', children: _jsxs(View, { style: styles.row, children: [_jsx(XButton, { type: 'primary', size: 'small', onPress: () => previewImages(0), children: "\u9884\u89C8\uFF08\u7B2C\u4E00\u5F20\uFF09" }), _jsx(XButton, { type: 'primary', size: 'small', onPress: () => previewImages(3), children: "\u9884\u89C8\uFF08\u7B2C\u56DB\u5F20\uFF09" })] }) })] }) }) }) }) }));
+};
+const styles = StyleSheet.create({
+    screen: {
+        flex: 1,
+    },
+    content: {
+        padding: 16,
+        paddingBottom: 40,
+    },
+    section: {
+        marginBottom: 16,
+        padding: 16,
+    },
+    sectionTitle: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    sectionDesc: {
+        marginTop: 4,
+        fontSize: 12,
+        lineHeight: 18,
+    },
+    sectionBody: {
+        marginTop: 12,
+    },
+    row: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 10,
+        marginBottom: 10,
+    },
+});
+export default XProvidersDemo;

package/dist/XPullView/index.d.ts

@@ -0,0 +1,76 @@
+/**
+ * ============================================================================
+ * XPullView —— 通用弹出层（duxapp/duxui XPullView 的 RN 移植版）
+ * ============================================================================
+ *
+ * 【一句话理解】
+ * 它不渲染任何东西到页面里（外层组件 return null），而是把弹层
+ * "托管"给全局 XTopView 宿主，由宿主在应用根部绘制。
+ *
+ * 【为什么这比 RN 原生 Modal 丝滑？】
+ * 1. 不是原生 Modal 窗口：没有原生窗口创建/销毁的开销；
+ * 2. Reanimated 在 UI 线程驱动动画（worklet）：JS 线程不参与逐帧运算，
+ *    动画期间 React 零重渲染；
+ * 3. 只动画 transform + opacity（GPU 合成属性），不触发布局；
+ * 4. 短时长 + ease-out 入场（默认 200ms，原生 Modal 约 300ms），起步快收尾利落；
+ * 5. 正确的挂载时机：第一帧就是隐藏态（面板在屏幕外/透明），下一帧才开始
+ *    入场动画，不存在"内容先闪现再移动"。
+ *
+ * 【组件分工】
+ * - XPullView（对外壳）：监听 visible 变化，用 XTopViewStore 的 add/update
+ *   把 PullOverlay 挂载/更新/移除；
+ * - PullOverlay（核心层）：真正渲染遮罩+面板，负责入场/离场动画。
+ *
+ * 【生命周期（关键，多看几遍）】
+ *   打开：visible=true
+ *     → add(<PullOverlay visible />)  组件挂载，第一帧是隐藏态
+ *     → 下一帧 rAF 触发入场动画（translateY: 屏高→0, ease-out）
+ *
+ *   关闭：visible=false
+ *     → update(同一个 key, <PullOverlay visible={false} />)
+ *     → React 按 key 复用同一个组件实例，只更新 props → 触发离场动画
+ *     → 动画播完（duration+50ms）才 remove()，从宿主中摘掉
+ *
+ *   再次打开：visible=true
+ *     → update 回 visible=true → 同一个实例重新播放入场动画
+ *     （此时 shared value 正处于隐藏态，正好无缝衔接）
+ * ============================================================================
+ */
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+/** 弹出方向：bottom 从底部滑入 / top 从顶部 / left、right 从两侧 / center 居中缩放 */
+export type XPullSide = 'bottom' | 'top' | 'left' | 'right' | 'center';
+/** XPullView 对外 API */
+interface XPullViewProps {
+    /** 是否显示（受控组件，与原生 Modal 的 visible 用法一致） */
+    visible: boolean;
+    /** 关闭回调：点遮罩（maskClosable）或需要关闭时触发 */
+    onClose?: () => void;
+    /** 弹出方向，默认 bottom */
+    side?: XPullSide;
+    /** 动画时长，默认 200ms（duxui 同款） */
+    duration?: number;
+    /** 遮罩最终透明度，默认 0.5（越接近 1 越黑） */
+    overlayOpacity?: number;
+    /** 是否显示黑色遮罩，默认 true */
+    mask?: boolean;
+    /** 点击遮罩是否关闭，默认 true */
+    maskClosable?: boolean;
+    /** 面板额外样式 */
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}
+/**
+ * XPullView —— 对外组件（薄壳）
+ *
+ * 【为什么壳要这么设计？】
+ * 弹层要一直"活着"到离场动画播完，所以不能 visible=false 就直接卸载。
+ * 这里用一个 keyRef 记录宿主中的 key：
+ *   - visible=true  && 无 key → add 挂载
+ *   - visible=true  && 有 key → update 更新（比如 children 变了）
+ *   - visible=false && 有 key → update 成离场态，由 PullOverlay 播完动画后
+ *                               调用 onExitEnd → remove
+ *   - 组件自身卸载（页面销毁）→ 兜底 remove
+ */
+export declare const XPullView: ({ visible, onClose, side, duration, overlayOpacity, mask, maskClosable, style, children, }: XPullViewProps) => null;
+export {};

package/dist/XPullView/index.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XPullView —— 通用弹出层（duxapp/duxui XPullView 的 RN 移植版）
+ * ============================================================================
+ *
+ * 【一句话理解】
+ * 它不渲染任何东西到页面里（外层组件 return null），而是把弹层
+ * "托管"给全局 XTopView 宿主，由宿主在应用根部绘制。
+ *
+ * 【为什么这比 RN 原生 Modal 丝滑？】
+ * 1. 不是原生 Modal 窗口：没有原生窗口创建/销毁的开销；
+ * 2. Reanimated 在 UI 线程驱动动画（worklet）：JS 线程不参与逐帧运算，
+ *    动画期间 React 零重渲染；
+ * 3. 只动画 transform + opacity（GPU 合成属性），不触发布局；
+ * 4. 短时长 + ease-out 入场（默认 200ms，原生 Modal 约 300ms），起步快收尾利落；
+ * 5. 正确的挂载时机：第一帧就是隐藏态（面板在屏幕外/透明），下一帧才开始
+ *    入场动画，不存在"内容先闪现再移动"。
+ *
+ * 【组件分工】
+ * - XPullView（对外壳）：监听 visible 变化，用 XTopViewStore 的 add/update
+ *   把 PullOverlay 挂载/更新/移除；
+ * - PullOverlay（核心层）：真正渲染遮罩+面板，负责入场/离场动画。
+ *
+ * 【生命周期（关键，多看几遍）】
+ *   打开：visible=true
+ *     → add(<PullOverlay visible />)  组件挂载，第一帧是隐藏态
+ *     → 下一帧 rAF 触发入场动画（translateY: 屏高→0, ease-out）
+ *
+ *   关闭：visible=false
+ *     → update(同一个 key, <PullOverlay visible={false} />)
+ *     → React 按 key 复用同一个组件实例，只更新 props → 触发离场动画
+ *     → 动画播完（duration+50ms）才 remove()，从宿主中摘掉
+ *
+ *   再次打开：visible=true
+ *     → update 回 visible=true → 同一个实例重新播放入场动画
+ *     （此时 shared value 正处于隐藏态，正好无缝衔接）
+ * ============================================================================
+ */
+import { useCallback, useEffect, useRef } from 'react';
+import { Dimensions, Pressable, StyleSheet, View } from 'react-native';
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useXTopViewStore } from '../XTopViewStore';
+/** 取一次屏幕宽高即可（旋转屏幕场景可改为监听 Dimensions 变化） */
+const { width: windowWidth, height: windowHeight } = Dimensions.get('window');
+/** 每种方向的"面板停靠位置"：absolute 定位，配合位移动画实现滑入滑出 */
+const SIDE_STYLES = {
+    bottom: { position: 'absolute', bottom: 0, left: 0, right: 0 }, // 贴底，宽度撑满
+    top: { position: 'absolute', top: 0, left: 0, right: 0 }, // 贴顶
+    left: { position: 'absolute', left: 0, top: 0, bottom: 0 }, // 贴左，高度撑满
+    right: { position: 'absolute', right: 0, top: 0, bottom: 0 }, // 贴右
+    center: {
+        // 居中：全屏 + flex 居中，面板在正中间
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+};
+/**
+ * 重要！遮罩要用 Animated.createAnimatedComponent 包装成"动画组件"。
+ *
+ * 【踩坑记录】useAnimatedStyle 返回的动画样式，只有 Reanimated 的
+ * Animated.* 组件（Animated.View / Animated.Text / createAnimatedComponent
+ * 包装的组件）才会生效。之前直接传给普通 <Pressable>，opacity 动画根本没跑，
+ * 遮罩变成了纯黑（#000 没有透明度）。这一行就是修复。
+ */
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+/**
+ * PullOverlay —— 真正渲染在 XTopView 宿主中的弹层（遮罩 + 面板）
+ *
+ * 【动画原理】
+ * 4 个 shared value（UI 线程上的"共享变量"）驱动一切：
+ *   translate  = 面板位移（隐藏时 = 屏高/屏宽，展示时 = 0）
+ *   scale      = 面板缩放（仅 center 方向用：0.85 → 1）
+ *   opacity    = 面板透明度（0 → 1）
+ *   maskOpacity = 遮罩透明度（0 → overlayOpacity）
+ *
+ * withTiming 是"动画指令"：告诉 Reanimated"用多少时长、什么缓动
+ * 把值动画到目标"。动画全程在 UI 线程跑，不经过 JS 线程和 React 渲染。
+ */
+const PullOverlay = ({ visible, onClose, side = 'bottom', duration = 200, overlayOpacity = 0.5, mask = true, maskClosable = true, style, children, onExitEnd, }) => {
+    const isCenter = side === 'center';
+    const horizontal = side === 'left' || side === 'right';
+    // 隐藏位移取整屏尺寸：保证不管面板多高/多宽，都能完全移出屏幕外
+    const hiddenOffset = horizontal ? windowWidth : windowHeight;
+    // center 方向不位移，改用缩放（0.85 → 1），质感更柔和
+    const hiddenScale = isCenter ? 0.85 : 1;
+    // 初始值 = 隐藏态（面板在屏幕外、透明）→ 这就是"第一帧不闪现"的关键
+    const translate = useSharedValue(hiddenOffset);
+    const scale = useSharedValue(hiddenScale);
+    const opacity = useSharedValue(0);
+    const maskOpacity = useSharedValue(0);
+    /**
+     * 入场动画：visible 为 true 时执行。
+     * 用 requestAnimationFrame 包一层 → 保证组件先以隐藏态渲染完一帧，
+     * 下一帧才开启动画。如果直接在 useEffect 里改值，React 批处理可能
+     * 导致第一帧就直接以目标值渲染（看不到动画）。
+     */
+    useEffect(() => {
+        if (visible) {
+            const raf = requestAnimationFrame(() => {
+                // 入场用 ease-out：起步快、末尾减速，给人"轻快"的感觉
+                translate.value = withTiming(0, { duration, easing: Easing.out(Easing.ease) });
+                scale.value = withTiming(1, { duration, easing: Easing.out(Easing.ease) });
+                opacity.value = withTiming(1, { duration });
+                maskOpacity.value = withTiming(overlayOpacity, { duration });
+            });
+            // 组件卸载或 visible 变化时取消未执行的 rAF，防止内存泄漏/误触发
+            return () => cancelAnimationFrame(raf);
+        }
+    }, [visible, duration, overlayOpacity]);
+    /**
+     * 离场动画：visible 变为 false 时执行。
+     * 四个值反向动画回隐藏态，duration+50ms 后调用 onExitEnd 让宿主移除本层
+     * （+50ms 是安全余量，确保最后一帧已经渲染完成）。
+     * 注意清除 setTimeout：如果动画中途被重新打开，不能让旧的定时器把层移除。
+     */
+    useEffect(() => {
+        if (!visible) {
+            // 离场用 ease-in-out：中间快、两端慢，收尾自然
+            translate.value = withTiming(hiddenOffset, { duration, easing: Easing.inOut(Easing.ease) });
+            scale.value = withTiming(hiddenScale, { duration });
+            opacity.value = withTiming(0, { duration });
+            maskOpacity.value = withTiming(0, { duration });
+            const timer = setTimeout(onExitEnd, duration + 50);
+            return () => clearTimeout(timer);
+        }
+    }, [visible, duration, onExitEnd]);
+    /**
+     * useAnimatedStyle：把 shared value 映射成"动画样式"。
+     * 这个 worklet 函数在 UI 线程上每次动画帧都会执行，
+     * 返回值直接合成到视图样式上 —— 这就是动画期间 React 零重渲染的原因。
+     */
+    const panelAnimatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: isCenter
+            ? [{ scale: scale.value }] // 居中：只缩放
+            : horizontal
+                ? [{ translateX: translate.value }] // 左右：横向位移
+                : [{ translateY: translate.value }], // 上下：纵向位移
+    }));
+    /** 遮罩样式：纯黑底 + 动画透明度（0.5 就是常见的半透明黑） */
+    const maskAnimatedStyle = useAnimatedStyle(() => ({ opacity: maskOpacity.value }));
+    /** 点遮罩关闭（maskClosable 为 true 时） */
+    const handleMaskPress = useCallback(() => {
+        if (maskClosable) {
+            onClose?.();
+        }
+    }, [maskClosable, onClose]);
+    return (_jsxs(View, { style: StyleSheet.absoluteFill, pointerEvents: 'box-none', children: [mask && (_jsx(AnimatedPressable, { onPress: handleMaskPress, style: [StyleSheet.absoluteFill, { backgroundColor: '#000' }, maskAnimatedStyle] })), _jsx(Animated.View, { style: [SIDE_STYLES[side], panelAnimatedStyle, style], pointerEvents: 'box-none', children: _jsx(View, { pointerEvents: 'auto', style: isCenter ? undefined : styles.panelWrapper, children: children }) })] }));
+};
+/**
+ * XPullView —— 对外组件（薄壳）
+ *
+ * 【为什么壳要这么设计？】
+ * 弹层要一直"活着"到离场动画播完，所以不能 visible=false 就直接卸载。
+ * 这里用一个 keyRef 记录宿主中的 key：
+ *   - visible=true  && 无 key → add 挂载
+ *   - visible=true  && 有 key → update 更新（比如 children 变了）
+ *   - visible=false && 有 key → update 成离场态，由 PullOverlay 播完动画后
+ *                               调用 onExitEnd → remove
+ *   - 组件自身卸载（页面销毁）→ 兜底 remove
+ */
+export const XPullView = ({ visible, onClose, side = 'bottom', duration = 200, overlayOpacity = 0.5, mask = true, maskClosable = true, style, children, }) => {
+    // 从全局 store 取三个操作（选择器写法：只订阅这几个函数的引用）
+    const add = useXTopViewStore(s => s.add);
+    const update = useXTopViewStore(s => s.update);
+    const remove = useXTopViewStore(s => s.remove);
+    /** 记录当前弹层在宿主中的 key；null 表示没有挂载 */
+    const keyRef = useRef(null);
+    /**
+     * 根据 show 构建要挂载的弹层元素。
+     * useCallback 缓存：children/参数不变时复用同一引用，
+     * 避免 useEffect 因依赖变化反复执行。
+     */
+    const buildElement = useCallback((show) => (_jsx(PullOverlay, { visible: show, side: side, duration: duration, overlayOpacity: overlayOpacity, mask: mask, maskClosable: maskClosable, style: style, onClose: onClose, onExitEnd: () => {
+            // 离场播完：从宿主移除，并把 key 置空（下次打开重新 add）
+            if (keyRef.current) {
+                remove(keyRef.current);
+                keyRef.current = null;
+            }
+        }, children: children })), [children, duration, mask, maskClosable, onClose, overlayOpacity, remove, side, style]);
+    /** 核心逻辑：visible 变化 → 挂载/更新弹层 */
+    useEffect(() => {
+        if (visible) {
+            // 打开：没挂载就挂载（入场），已挂载就更新（比如重新打开或内容变化）
+            if (!keyRef.current) {
+                keyRef.current = add(buildElement(true));
+            }
+            else {
+                update(keyRef.current, buildElement(true));
+            }
+        }
+        else if (keyRef.current) {
+            // 关闭：更新成离场态，动画播完后 PullOverlay 会调用 onExitEnd 移除
+            update(keyRef.current, buildElement(false));
+        }
+    }, [visible, add, update, buildElement]);
+    /** 兜底：XPullView 自身被卸载时（比如页面 navigate 走了），清理宿主里的弹层 */
+    useEffect(() => {
+        return () => {
+            if (keyRef.current) {
+                remove(keyRef.current);
+                keyRef.current = null;
+            }
+        };
+    }, [remove]);
+    // 壳本身不渲染任何 UI，弹层都在 XTopView 宿主里
+    return null;
+};
+const styles = StyleSheet.create({
+    /** 非 center 方向：让面板宽度/高度撑满停靠边 */
+    panelWrapper: {
+        alignSelf: 'stretch',
+    },
+});

package/dist/XRadio/index.d.ts

@@ -0,0 +1,83 @@
+/**
+ * ============================================================================
+ * XRadio —— 对标 antd Radio（RN 自实现版）
+ * ============================================================================
+ *
+ * 支持的 antd API：
+ * - <XRadio value onChange disabled checked defaultChecked>label</XRadio>
+ * - <XRadio.Group value defaultValue options onChange optionType buttonStyle disabled>
+ *   - options: {label, value, disabled?}[]，传了就不用手写子 Radio
+ *   - optionType: 'default'（圆点单选） | 'button'（按钮单选，配合 options 使用）
+ *   - buttonStyle: 'outline' | 'solid'（按钮单选的选中样式）
+ * - <XRadio.Button value>label</XRadio.Button>（手动组合按钮单选，各自独立胶囊）
+ *
+ * 与 antd 的差异：
+ * - onChange 回调参数是轻量合成事件 {value, checked, target}（antd 是 DOM 事件包装）
+ * - Radio.Button 手动组合时不做 antd 那种连体分段样式（连体只出现在
+ *   Group options + optionType='button' 的自动渲染里，因为只有那一刻才拿得到索引）
+ */
+import React from 'react';
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+/** antd Radio 的 onChange 事件对象的 RN 等价物 */
+export interface XRadioChangeEvent {
+    value: any;
+    checked: boolean;
+    target: {
+        value: any;
+        checked: boolean;
+    };
+    stopPropagation: () => void;
+}
+export interface XRadioGroupContextValue {
+    value?: any;
+    disabled?: boolean;
+    /** 圆点单选：走统一 onChange；按钮单选：Group 自渲染，同样走这里 */
+    onRadioChange: (value: any, checked: boolean) => void;
+    /** 是否是按钮形态（Group 内的 Radio.Button 交给 Group 统一渲染时使用） */
+    optionType?: 'default' | 'button';
+    buttonStyle?: 'outline' | 'solid';
+}
+export interface XRadioProps {
+    value?: any;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (e: XRadioChangeEvent) => void;
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+export declare function XRadio({ value, checked, defaultChecked, disabled, onChange, children, style, textStyle, testID }: XRadioProps): React.JSX.Element;
+export declare namespace XRadio {
+    var Group: typeof XRadioGroup;
+    var Button: typeof XRadioButton;
+}
+export interface XRadioButtonProps {
+    value?: any;
+    disabled?: boolean;
+    checked?: boolean;
+    onChange?: (e: XRadioChangeEvent) => void;
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+export declare function XRadioButton({ value, disabled, checked, onChange, children, style, testID }: XRadioButtonProps): React.JSX.Element;
+export interface XRadioGroupProps {
+    value?: any;
+    defaultValue?: any;
+    options?: Array<{
+        label: React.ReactNode;
+        value: any;
+        disabled?: boolean;
+    }>;
+    onChange?: (e: XRadioChangeEvent) => void;
+    optionType?: 'default' | 'button';
+    buttonStyle?: 'outline' | 'solid';
+    disabled?: boolean;
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare function XRadioGroup(props: XRadioGroupProps): React.JSX.Element;
+export default XRadio;

package/dist/XRadio/index.js

@@ -0,0 +1,186 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ============================================================================
+ * XRadio —— 对标 antd Radio（RN 自实现版）
+ * ============================================================================
+ *
+ * 支持的 antd API：
+ * - <XRadio value onChange disabled checked defaultChecked>label</XRadio>
+ * - <XRadio.Group value defaultValue options onChange optionType buttonStyle disabled>
+ *   - options: {label, value, disabled?}[]，传了就不用手写子 Radio
+ *   - optionType: 'default'（圆点单选） | 'button'（按钮单选，配合 options 使用）
+ *   - buttonStyle: 'outline' | 'solid'（按钮单选的选中样式）
+ * - <XRadio.Button value>label</XRadio.Button>（手动组合按钮单选，各自独立胶囊）
+ *
+ * 与 antd 的差异：
+ * - onChange 回调参数是轻量合成事件 {value, checked, target}（antd 是 DOM 事件包装）
+ * - Radio.Button 手动组合时不做 antd 那种连体分段样式（连体只出现在
+ *   Group options + optionType='button' 的自动渲染里，因为只有那一刻才拿得到索引）
+ */
+import { createContext, useContext, useMemo, useState } from 'react';
+import { Pressable, StyleSheet, View, Text } from 'react-native';
+import { useXTheme, xTheme } from '../theme';
+const RadioGroupContext = createContext(null);
+function makeEvent(value, checked) {
+    const event = {
+        value,
+        checked,
+        target: { value, checked },
+        stopPropagation: () => { },
+    };
+    return event;
+}
+export function XRadio({ value, checked, defaultChecked, disabled, onChange, children, style, textStyle, testID }) {
+    const t = useXTheme();
+    const group = useContext(RadioGroupContext);
+    const [innerChecked, setInnerChecked] = useState(!!defaultChecked);
+    // Group 里的选中态由 Group value 决定；独立使用时受控/非受控自管理
+    const isChecked = group ? group.value !== undefined && group.value === value : checked ?? innerChecked;
+    const isDisabled = disabled || (group?.disabled ?? false);
+    const handlePress = () => {
+        if (isDisabled || isChecked)
+            return; // 单选已选中再点不触发（antd 同款）
+        if (!group) {
+            setInnerChecked(true);
+            onChange?.(makeEvent(value, true));
+        }
+        else {
+            group.onRadioChange(value, true);
+        }
+    };
+    return (_jsxs(Pressable, { testID: testID, onPress: handlePress, disabled: isDisabled, style: ({ pressed }) => [styles.radioRow, pressed && !isDisabled && styles.pressed, style], children: [_jsx(XRadioIndicator, { checked: isChecked, disabled: isDisabled }), children != null && (_jsx(Text, { style: [styles.radioLabel, { color: isDisabled ? t.colorTextQuaternary : t.colorText }, textStyle], allowFontScaling: false, children: children }))] }));
+}
+/** 圆点指示器：外圈 20 + 选中内点 10，颜色随状态 */
+function XRadioIndicator({ checked, disabled }) {
+    const t = useXTheme();
+    const ringColor = disabled ? t.colorBorder : checked ? t.colorPrimary : t.colorBorder;
+    return (_jsx(View, { style: [styles.radioRing, { borderColor: ringColor }], children: checked && _jsx(View, { style: [styles.radioDot, { backgroundColor: disabled ? t.colorTextQuaternary : t.colorPrimary }] }) }));
+}
+export function XRadioButton({ value, disabled, checked, onChange, children, style, testID }) {
+    const t = useXTheme();
+    const group = useContext(RadioGroupContext);
+    const isChecked = group ? group.value === value : !!checked;
+    const isDisabled = disabled || (group?.disabled ?? false);
+    const buttonStyle = group?.buttonStyle ?? 'outline';
+    const handlePress = () => {
+        if (isDisabled || isChecked)
+            return;
+        if (group) {
+            group.onRadioChange(value, true);
+        }
+        else {
+            onChange?.(makeEvent(value, true));
+        }
+    };
+    // outline：选中=主色描边+主色字；solid：选中=主色实底+白字
+    const selected = buttonStyle === 'solid';
+    const bg = isDisabled ? t.colorBgContainerDisabled : isChecked && selected ? t.colorPrimary : t.colorBgContainer;
+    const textColor = isDisabled ? t.colorTextQuaternary : isChecked ? (selected ? t.colorTextLightSolid : t.colorPrimary) : t.colorTextSecondary;
+    const borderColor = isDisabled ? t.colorBorder : isChecked ? t.colorPrimary : t.colorBorder;
+    return (_jsx(Pressable, { testID: testID, onPress: handlePress, disabled: isDisabled, style: ({ pressed }) => [styles.buttonBase, { backgroundColor: bg, borderColor }, pressed && !isDisabled && styles.pressed, style], children: _jsx(Text, { style: [styles.buttonText, { color: textColor }], allowFontScaling: false, children: children }) }));
+}
+function XRadioGroup(props) {
+    const { value, defaultValue, options, onChange, optionType = 'default', buttonStyle = 'outline', disabled, children, style, testID } = props;
+    const [innerValue, setInnerValue] = useState(defaultValue);
+    // 受控模式：外部传了 value 就以外部为准；否则用内部态
+    const currentValue = value !== undefined ? value : innerValue;
+    const handleRadioChange = (v, checked) => {
+        if (value === undefined) {
+            setInnerValue(v);
+        }
+        onChange?.(makeEvent(v, checked));
+    };
+    const ctx = useMemo(() => ({ value: currentValue, disabled, onRadioChange: handleRadioChange, optionType, buttonStyle }), [currentValue, disabled, optionType, buttonStyle, value, onChange]);
+    return (_jsx(RadioGroupContext.Provider, { value: ctx, children: _jsx(View, { testID: testID, style: [styles.group, style], children: options ? (optionType === 'button' ? (_jsx(View, { style: styles.buttonRow, children: options.map((opt, idx) => (_jsx(GroupButton, { option: opt, idx: idx, total: options.length, checked: currentValue === opt.value, disabled: disabled ?? opt.disabled ?? false, solid: buttonStyle === 'solid', onPress: () => handleRadioChange(opt.value, true) }, String(opt.value)))) })) : (
+            // 圆点形态：横排换行
+            options.map(opt => (_jsx(XRadio, { value: opt.value, disabled: opt.disabled, children: opt.label }, String(opt.value)))))) : (children) }) }));
+}
+/** Group options + button 形态的连体按钮（需要知道 idx 才能算首尾圆角） */
+function GroupButton({ option, idx, total, checked, disabled, solid, onPress, }) {
+    const t = useXTheme();
+    const isFirst = idx === 0;
+    const isLast = idx === total - 1;
+    const radius = xTheme.borderRadius;
+    const bg = disabled ? t.colorBgContainerDisabled : checked && solid ? t.colorPrimary : t.colorBgContainer;
+    const textColor = disabled ? t.colorTextQuaternary : checked ? (solid ? t.colorTextLightSolid : t.colorPrimary) : t.colorTextSecondary;
+    const borderColor = disabled ? t.colorBorder : checked ? t.colorPrimary : t.colorBorder;
+    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, style: ({ pressed }) => [
+            styles.groupButton,
+            {
+                backgroundColor: bg,
+                borderColor,
+                borderTopLeftRadius: isFirst ? radius : 0,
+                borderBottomLeftRadius: isFirst ? radius : 0,
+                borderTopRightRadius: isLast ? radius : 0,
+                borderBottomRightRadius: isLast ? radius : 0,
+                // 连体：非首元素左移一个边框宽度，实现边框重叠（antd 的 -1px margin 同款思路）
+                marginLeft: isFirst ? 0 : -1,
+                // 后画的兄弟会盖住前一个的右边框：选中的按钮抬高层级，
+                // 保证自己的蓝色右边框压在后一个按钮的灰色左边框之上（antd 的 z-index:1 同款）
+                zIndex: checked ? 2 : 1,
+            },
+            pressed && !disabled && styles.pressed,
+        ], children: _jsx(Text, { style: [styles.buttonText, { color: textColor }], allowFontScaling: false, children: option.label }) }));
+}
+XRadio.Group = XRadioGroup;
+XRadio.Button = XRadioButton;
+const styles = StyleSheet.create({
+    radioRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 8, // 扩大点击热区（对标 antd RN 的 Radio 触摸面积）
+        alignSelf: 'flex-start',
+    },
+    pressed: {
+        opacity: 0.7,
+    },
+    radioRing: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        borderWidth: 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    radioDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+    },
+    radioLabel: {
+        fontSize: xTheme.fontSize,
+        marginLeft: 8,
+    },
+    buttonBase: {
+        height: xTheme.controlHeight,
+        paddingHorizontal: 14,
+        borderRadius: xTheme.borderRadius,
+        borderWidth: StyleSheet.hairlineWidth * 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+        alignSelf: 'flex-start',
+    },
+    groupButton: {
+        height: xTheme.controlHeight,
+        paddingHorizontal: 14,
+        borderWidth: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+    },
+    buttonText: {
+        fontSize: xTheme.fontSize,
+    },
+    group: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        rowGap: 8,
+        columnGap: 16,
+    },
+});
+export default XRadio;