@bm-fe/react-native-ui-components 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 @bm-fe/react-native-multi-bundle
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,267 @@
+# @bm-fe/react-native-multi-bundle
+
+React Native 多 Bundle 系统 - 支持模块按需加载和独立更新
+
+## 特性
+
+- ✅ **模块按需加载**：支持懒加载，减少初始包体积
+- ✅ **模块依赖管理**：自动处理模块间的依赖关系
+- ✅ **模块状态管理**：完整的生命周期管理（idle/loading/loaded/failed）
+- ✅ **路由加载器**：`createModuleRouteLoader`，完美支持 React Navigation `getComponent` API
+- ✅ **错误处理与重试**：自动错误处理，支持重试机制和自定义错误组件
+- ✅ **预加载支持**：`preloadModule` 支持关键模块预加载
+- ✅ **开发环境 Mock**：开发环境无需 Native 模块即可运行
+- ✅ **TypeScript 支持**：完整的类型定义
+
+## 安装
+
+```bash
+npm install @bm-fe/react-native-multi-bundle
+# 或
+yarn add @bm-fe/react-native-multi-bundle
+```
+
+## 快速开始
+
+### 1. 初始化多 Bundle 系统
+
+在应用入口（通常是 `App.tsx`）中调用 `initMultiBundle`：
+
+```typescript
+import { initMultiBundle, LocalBundleManager } from '@bm-fe/react-native-multi-bundle';
+import { Platform } from 'react-native';
+
+function App() {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    async function bootstrap() {
+      const result = await initMultiBundle({
+        modulePaths: ['src/modules/**'],
+        sharedDependencies: [
+          'node_modules/@bm-fe/react-native-multi-bundle/**',
+          'src/navigation/**'
+        ],
+        manifestProvider: async () => {
+          return await LocalBundleManager.getCurrentBundleManifest();
+        },
+        preloadModules: ['settings'],
+        devServer: {
+          host: Platform.OS === 'android' ? '10.0.2.2' : 'localhost',
+          port: 8081,
+        },
+      });
+
+      if (result.success) {
+        setReady(true);
+      }
+    }
+
+    bootstrap();
+  }, []);
+
+  if (!ready) {
+    return <LoadingScreen />;
+  }
+
+  // ... 其余代码
+}
+```
+
+### 2. 使用模块路由
+
+```typescript
+import { createModuleRouteLoader } from '@bm-fe/react-native-multi-bundle';
+
+// 创建路由加载器
+export const createHomeScreen = createModuleRouteLoader('home', 'Home');
+
+// 在 React Navigation 中使用
+<Stack.Screen name="Home" getComponent={createHomeScreen} />
+```
+
+### 3. 自定义错误处理（可选）
+
+```typescript
+import { createModuleLoader, type ErrorFallbackProps } from '@bm-fe/react-native-multi-bundle';
+
+// 自定义错误组件
+function MyErrorFallback({ moduleId, error, onRetry }: ErrorFallbackProps) {
+  return (
+    <View>
+      <Text>模块 {moduleId} 加载失败</Text>
+      <Button title="重试" onPress={onRetry} />
+    </View>
+  );
+}
+
+// 使用自定义错误组件
+const createHomeScreen = createModuleLoader(
+  'home',
+  (exports) => exports.routes.Home,
+  {
+    ErrorFallback: MyErrorFallback,
+    onError: (error) => console.error('加载失败:', error),
+  }
+);
+```
+
+## 完整集成指南
+
+详细的集成步骤请参考：[INTEGRATION.md](./INTEGRATION.md)
+
+包括：
+- Metro 配置
+- Native 模块集成（Android/iOS）
+- 模块配置
+- 构建多 Bundle
+
+## API 文档
+
+### initMultiBundle
+
+初始化多 Bundle 系统。
+
+```typescript
+function initMultiBundle(config?: MultiBundleConfig): Promise<InitResult>
+```
+
+### createModuleRouteLoader
+
+创建模块路由加载器函数（推荐，用于 React Navigation `getComponent` API）。
+
+```typescript
+function createModuleRouteLoader(
+  moduleId: string,
+  routeKey: string
+): () => React.ComponentType<any>
+```
+
+### preloadModule
+
+预加载模块。
+
+```typescript
+function preloadModule(moduleId: string): Promise<void>
+```
+
+更多 API 文档请参考：[src/multi-bundle/README.md](./src/multi-bundle/README.md)
+
+## 示例应用
+
+查看完整示例：[examples/demo-app](./examples/demo-app/README.md)
+
+## 版本管理
+
+本项目使用 [standard-version](https://github.com/conventional-changelog/standard-version) 进行版本管理，遵循 [Conventional Commits](https://www.conventionalcommits.org/) 规范。
+
+### 版本命令
+
+```bash
+# 自动判断版本类型
+npm run version
+
+# 指定版本类型
+npm run version:patch  # 1.0.0 -> 1.0.1
+npm run version:minor  # 1.0.0 -> 1.1.0
+npm run version:major  # 1.0.0 -> 2.0.0
+npm run version:beta   # 1.0.0 -> 1.0.1-beta.0
+```
+
+## 发布流程
+
+### 发布前检查
+
+1. **确保代码已提交**
+   ```bash
+   git status
+   git add .
+   git commit -m "chore: prepare release"
+   ```
+
+2. **运行测试**
+   ```bash
+   npm test
+   ```
+
+3. **检查打包内容**
+   ```bash
+   npm pack --dry-run
+   ```
+
+### 发布 Beta 版本
+
+Beta 版本用于测试新功能，不会影响 `latest` 标签。
+
+```bash
+# 方式 1：使用便捷脚本（推荐）
+npm run release:beta
+
+# 方式 2：分步执行
+npm run version:beta    # 更新版本号为 beta（如：1.0.0 -> 1.0.1-beta.0）
+npm run publish:beta    # 发布到 beta 标签
+```
+
+**安装 Beta 版本：**
+```bash
+npm install @bm-fe/react-native-multi-bundle@beta
+# 或安装特定 beta 版本
+npm install @bm-fe/react-native-multi-bundle@1.0.1-beta.0
+```
+
+### 发布正式版本
+
+```bash
+# 方式 1：使用便捷脚本（推荐）
+npm run release
+
+# 方式 2：分步执行
+npm run version        # 自动判断版本类型并更新 CHANGELOG
+npm publish            # 发布到 latest 标签
+```
+
+**发布流程说明：**
+1. `npm run version` 会根据提交信息自动判断版本类型（patch/minor/major）
+2. 自动更新 `CHANGELOG.md`
+3. 自动创建 git tag
+4. `npm publish` 发布到 npm（默认 `latest` 标签）
+
+### 版本标签说明
+
+- **latest**：稳定版本，用户通过 `npm install @bm-fe/react-native-multi-bundle` 安装
+- **beta**：测试版本，需要显式指定 `@beta` 标签安装
+
+### 从 Beta 升级到正式版
+
+当 beta 版本稳定后，发布正式版本：
+
+```bash
+# 1. 更新版本号为正式版本（移除 beta 后缀）
+npm version 1.0.1 --no-git-tag-version
+
+# 2. 发布到 latest
+npm publish
+```
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 运行测试
+npm test
+
+# 运行示例应用
+cd examples/demo-app
+npm install
+npm start
+```
+
+## 许可证
+
+MIT
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@bm-fe/react-native-ui-components",
+  "version": "1.0.1",
+  "description": "React Native UI Components Library",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.ts",
+  "files": [
+    "src/components",
+    "src/screens",
+    "src/types",
+    "src/index.ts",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "lint": "eslint .",
+    "test": "jest",
+    "version": "standard-version",
+    "version:patch": "standard-version --release-as patch",
+    "version:minor": "standard-version --release-as minor",
+    "version:major": "standard-version --release-as major",
+    "version:beta": "npm version prerelease --preid=beta --no-git-tag-version --no-scripts",
+    "publish:beta": "npm publish --tag beta",
+    "release:beta": "npm run version:beta && npm run publish:beta",
+    "release": "npm run version && npm publish"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.25.2",
+    "@babel/preset-env": "7.25.2",
+    "@babel/runtime": "7.25.0",
+    "@react-native-community/cli": "18.0.0",
+    "@react-native-community/cli-platform-android": "18.0.0",
+    "@react-native-community/cli-platform-ios": "18.0.0",
+    "@react-native/babel-preset": "0.79.0",
+    "@react-native/eslint-config": "0.79.0",
+    "@react-native/gradle-plugin": "0.79.0",
+    "@react-native/metro-config": "0.79.0",
+    "@react-native/typescript-config": "0.79.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "29.5.13",
+    "@types/react": "19.0.0",
+    "@types/react-test-renderer": "19.0.0",
+    "eslint": "8.22.0",
+    "jest": "29.7.0",
+    "prettier": "3.2.5",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-test-renderer": "19.0.0",
+    "standard-version": "^9.5.0",
+    "typescript": "5.5.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0 <22.0.0"
+  }
+}

package/src/components/NativeDesign/BMTextButton.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback } from 'react';
+import {
+  Platform,
+  StyleProp,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+  requireNativeComponent,
+} from 'react-native';
+
+/**
+ * BMTextButton 样式类型
+ * - black: Widget.BitMart4.Button.TextButton.Black
+ * - gray: Widget.BitMart4.Button.TextButton.Gray
+ * - blue: Widget.BitMart4.Button.TextButton.Blue
+ */
+export type BMTextButtonStyleType = 'black' | 'gray' | 'blue';
+
+interface BMTextButtonProps {
+  /** 按钮文本 */
+  text: string;
+  /** 样式类型 */
+  styleType?: BMTextButtonStyleType;
+  /** 是否启用 */
+  enabled?: boolean;
+  /** 点击回调 */
+  onPress?: () => void;
+  /** 样式 */
+  style?: StyleProp<ViewStyle>;
+}
+
+interface NativeBMTextButtonProps {
+  text: string;
+  styleType: string;
+  enabled: boolean;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+// Android Native 组件
+const NativeBMTextButton =
+  Platform.OS === 'android'
+    ? requireNativeComponent<NativeBMTextButtonProps>('BMTextButton')
+    : null;
+
+/**
+ * BMTextButton - 使用 BitMart Design 组件库样式的文本按钮
+ *
+ * 在 Android 上使用 Native 组件渲染，在 iOS 上使用 RN 组件模拟
+ *
+ * @example
+ * ```tsx
+ * <BMTextButton
+ *   text="Button Text Link"
+ *   styleType="black"
+ *   onPress={() => console.log('pressed')}
+ * />
+ * ```
+ */
+export const BMTextButton: React.FC<BMTextButtonProps> = ({
+  text,
+  styleType = 'black',
+  enabled = true,
+  onPress,
+  style,
+}) => {
+  const handlePress = useCallback(() => {
+    if (enabled && onPress) {
+      onPress();
+    }
+  }, [enabled, onPress]);
+
+  // DEBUG: 打印调试信息
+  console.log(
+    `🔴 BMTextButton render - Platform: ${Platform.OS}, NativeBMTextButton exists: ${!!NativeBMTextButton}, text: ${text}`,
+  );
+
+  // Android: 使用 Native 组件
+  if (Platform.OS === 'android' && NativeBMTextButton) {
+    console.log('🔴 Rendering Native BMTextButton with red container');
+    return (
+      <View style={[styles.container, style]}>
+        <NativeBMTextButton
+          text={text}
+          styleType={styleType}
+          enabled={enabled}
+          onPress={handlePress}
+          style={styles.nativeButton}
+        />
+      </View>
+    );
+  }
+
+  // iOS: 使用 RN 组件模拟（后续可以替换为 iOS Native 组件）
+  const textColor = getTextColorForStyleType(styleType, enabled);
+
+  return (
+    <TouchableOpacity
+      onPress={handlePress}
+      disabled={!enabled}
+      style={[styles.container, style]}
+      activeOpacity={0.7}
+    >
+      <Text style={[styles.text, { color: textColor }]}>{text}</Text>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * 根据样式类型获取文本颜色
+ */
+function getTextColorForStyleType(
+  styleType: BMTextButtonStyleType,
+  enabled: boolean,
+): string {
+  if (!enabled) {
+    return '#CCCCCC';
+  }
+
+  switch (styleType) {
+    case 'black':
+      return '#151515';
+    case 'gray':
+      return '#666666';
+    case 'blue':
+      return '#2196F3';
+    default:
+      return '#151515';
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: 'flex-start',
+  },
+  // DEBUG: 红色背景 - RN 容器层
+  debugContainerRed: {
+    backgroundColor: 'red',
+    padding: 8,
+  },
+  nativeButton: {
+    minHeight: 48,
+    minWidth: 150,
+  },
+  text: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#151515',
+  },
+});
+
+export default BMTextButton;

package/src/components/NativeDesign/Button.tsx

@@ -0,0 +1,233 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  Platform,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+  requireNativeComponent,
+} from 'react-native';
+
+/**
+ * 支持的按钮样式类型
+ */
+export type ButtonType = 'Primary' | 'Secondary' | 'Green' | 'Red' | 'White';
+
+/**
+ * 支持的按钮尺寸
+ */
+export type ButtonSize = 'XLarge' | 'Large' | 'Medium' | 'Small' | 'XSmall' | 'XXSmall';
+
+/**
+ * 按钮样式名称（格式：Type.Size）
+ */
+export type ButtonStyleName = `${ButtonType}.${ButtonSize}`;
+
+/**
+ * 图标位置（内部使用）
+ */
+export type IconPosition = 'left' | 'right';
+
+/**
+ * 按钮尺寸映射表（对应 Android 样式中的 android:layout_height）
+ * 用于 iOS 端的尺寸计算
+ */
+const BUTTON_SIZE_MAP: Record<ButtonSize, { height: number; minWidth: number }> = {
+  XLarge: { height: 56, minWidth: 120 },  // Widget.BitMart4.Button.*.XLarge
+  Large: { height: 48, minWidth: 100 },   // Widget.BitMart4.Button.*.Large
+  Medium: { height: 40, minWidth: 80 },   // Widget.BitMart4.Button.*.Medium
+  Small: { height: 36, minWidth: 70 },    // Widget.BitMart4.Button.*.Small
+  XSmall: { height: 32, minWidth: 60 },   // Widget.BitMart4.Button.*.XSmall
+  XXSmall: { height: 26, minWidth: 50 },  // Widget.BitMart4.Button.*.XXSmall
+};
+
+/**
+ * 从 styleName 中提取尺寸
+ */
+const getSizeFromStyleName = (styleName: ButtonStyleName): ButtonSize => {
+  const parts = styleName.split('.');
+  return parts[1] as ButtonSize;
+};
+
+/**
+ * 根据按钮样式自动推断图标颜色
+ */
+const getIconColorForStyle = (styleName: ButtonStyleName): string => {
+  const type = styleName.split('.')[0] as ButtonType;
+
+  // Secondary 和 White 使用蓝色图标，其他使用白色图标
+  switch (type) {
+    case 'Secondary':
+    case 'White':
+      return '#0066FF';
+    case 'Primary':
+    case 'Green':
+    case 'Red':
+    default:
+      return '#ffffff';
+  }
+};
+
+interface ButtonProps {
+  /** 按钮文本 */
+  text: string;
+  /** 按钮样式，格式：Type.Size（如 "Primary.XLarge"）*/
+  styleName?: ButtonStyleName;
+  /** 是否启用 */
+  enabled?: boolean;
+  /** 是否显示加载状态（原生进度条/ActivityIndicator）*/
+  loading?: boolean;
+  /** 点击回调 */
+  onPress?: () => void;
+  /** 样式 */
+  style?: StyleProp<ViewStyle>;
+  /** 左侧图标（SVG 字符串，颜色自动推断） */
+  iconLeft?: string;
+  /** 右侧图标（SVG 字符串，颜色自动推断） */
+  iconRight?: string;
+  /** 是否全宽布局（自动填充父容器宽度，常用于 Footer 按钮） */
+  fullWidth?: boolean;
+}
+
+interface NativeSizeChangeEvent {
+  nativeEvent: {
+    width: number;
+    height: number;
+  };
+}
+
+interface NativeButtonProps {
+  text: string;
+  styleName?: string;
+  enabled: boolean;
+  loading?: boolean;
+  onPress?: () => void;
+  onSizeChange?: (event: NativeSizeChangeEvent) => void;
+  style?: StyleProp<ViewStyle>;
+  iconSvgString?: string;
+  iconColor?: string;
+  iconPosition?: string;
+}
+
+// Native Components for different platforms
+const NativeButton =
+  Platform.OS === 'android'
+    ? requireNativeComponent<NativeButtonProps>('PrimaryXLargeButton')
+    : requireNativeComponent<NativeButtonProps>('PrimaryButtonView');
+
+/**
+ * Button - 跨平台原生按钮组件
+ *
+ * @example
+ * ```tsx
+ * // 普通按钮
+ * <Button text="Submit" styleName={ButtonStyles.Primary.Large} onPress={handleSubmit} />
+ *
+ * // 左侧图标（图标颜色自动推断）
+ * <Button text="Back" styleName={ButtonStyles.Primary.Large} iconLeft={IC_BUTTON_SVG} />
+ *
+ * // 右侧图标
+ * <Button text="Next" styleName={ButtonStyles.Primary.Large} iconRight={IC_BUTTON_SVG} />
+ *
+ * // 全宽按钮
+ * <Button text="Confirm" styleName={ButtonStyles.Primary.Large} fullWidth />
+ * ```
+ */
+export const Button: React.FC<ButtonProps> = ({
+  text,
+  styleName = 'Primary.XLarge',
+  enabled = true,
+  loading = false,
+  onPress,
+  style,
+  iconLeft,
+  iconRight,
+  fullWidth = false,
+}) => {
+  const [nativeSize, setNativeSize] = useState<{ width: number; height: number } | null>(null);
+
+  const handlePress = useCallback(() => {
+    if (enabled && onPress) {
+      onPress();
+    }
+  }, [enabled, onPress]);
+
+  const handleSizeChange = useCallback((event: NativeSizeChangeEvent) => {
+    // fullWidth 模式下忽略原生测量
+    if (fullWidth) return;
+
+    const { width, height } = event.nativeEvent;
+    setNativeSize({ width, height });
+  }, [fullWidth]);
+
+  const size = getSizeFromStyleName(styleName);
+  const dimensions = BUTTON_SIZE_MAP[size];
+
+  // 确定使用哪个图标（优先使用 iconLeft）
+  const iconSvg = iconLeft || iconRight;
+  const iconPosition = iconRight ? 'trailing' : 'leading';
+
+  // 自动推断图标颜色
+  const iconColor = iconSvg ? getIconColorForStyle(styleName) : undefined;
+
+  const baseStyle: ViewStyle = useMemo(() => {
+    // fullWidth 模式：使用 100% 宽度，由 wrapper 的 flex 布局控制实际宽度
+    if (fullWidth) {
+      return {
+        width: '100%' as any,
+        height: dimensions.height,
+      };
+    }
+
+    // 非 fullWidth 模式：检查是否由父级决定宽度
+    const flat = style ? StyleSheet.flatten(style) as ViewStyle : null;
+    const userWantsOwnWidth = flat && (
+      flat.width !== undefined ||
+      flat.flex !== undefined ||
+      flat.position === 'absolute'
+    );
+
+    if (userWantsOwnWidth) {
+      // 由父级决定宽度，只设高度
+      return {
+        height: nativeSize ? nativeSize.height : dimensions.height,
+      };
+    }
+
+    // 自动宽度模式：使用原生测量的尺寸或默认尺寸
+    if (nativeSize) {
+      return { width: nativeSize.width, height: nativeSize.height };
+    }
+    return { height: dimensions.height, minWidth: dimensions.minWidth };
+  }, [fullWidth, style, nativeSize, dimensions.height, dimensions.minWidth]);
+
+  const mergedStyle = [baseStyle, style];
+
+  const buttonElement = (
+    <NativeButton
+      text={text}
+      styleName={styleName}
+      enabled={enabled}
+      loading={loading}
+      onPress={handlePress}
+      onSizeChange={handleSizeChange}
+      iconSvgString={iconSvg}
+      iconColor={iconColor}
+      iconPosition={iconPosition}
+      style={mergedStyle}
+    />
+  );
+
+  // fullWidth 模式：wrapper 使用 flex 布局，按钮使用 100% 填充
+  if (fullWidth) {
+    return (
+      <View style={{ flex: 1, alignSelf: 'stretch' }}>
+        {buttonElement}
+      </View>
+    );
+  }
+
+  return buttonElement;
+};
+
+export default Button;

package/src/components/NativeDesign/ButtonStyles.ts

@@ -0,0 +1,61 @@
+/**
+ * Button 样式常量定义
+ *
+ * 使用方式：
+ * import { ButtonStyles } from '@/components/NativeDesign/ButtonStyles';
+ *
+ * <Button styleName={ButtonStyles.Primary.Large} />
+ * <TextButton styleName={ButtonStyles.Text.Blue} />
+ */
+
+export const ButtonStyles = {
+  // Button 组件样式
+  Primary: {
+    XLarge: 'Primary.XLarge' as const,
+    Large: 'Primary.Large' as const,
+    Medium: 'Primary.Medium' as const,
+    Small: 'Primary.Small' as const,
+    XSmall: 'Primary.XSmall' as const,
+    XXSmall: 'Primary.XXSmall' as const,
+  },
+  Secondary: {
+    XLarge: 'Secondary.XLarge' as const,
+    Large: 'Secondary.Large' as const,
+    Medium: 'Secondary.Medium' as const,
+    Small: 'Secondary.Small' as const,
+    XSmall: 'Secondary.XSmall' as const,
+    XXSmall: 'Secondary.XXSmall' as const,
+  },
+  Green: {
+    XLarge: 'Green.XLarge' as const,
+    Large: 'Green.Large' as const,
+    Medium: 'Green.Medium' as const,
+    Small: 'Green.Small' as const,
+    XSmall: 'Green.XSmall' as const,
+    XXSmall: 'Green.XXSmall' as const,
+  },
+  Red: {
+    XLarge: 'Red.XLarge' as const,
+    Large: 'Red.Large' as const,
+    Medium: 'Red.Medium' as const,
+    Small: 'Red.Small' as const,
+    XSmall: 'Red.XSmall' as const,
+    XXSmall: 'Red.XXSmall' as const,
+  },
+  White: {
+    XLarge: 'White.XLarge' as const,
+    Large: 'White.Large' as const,
+    Medium: 'White.Medium' as const,
+    Small: 'White.Small' as const,
+    XSmall: 'White.XSmall' as const,
+    XXSmall: 'White.XXSmall' as const,
+  },
+  // TextButton 组件样式
+  Text: {
+    Black: 'Black' as const,
+    Gray: 'Gray' as const,
+    Blue: 'Blue' as const,
+  },
+} as const;
+
+export default ButtonStyles;

package/src/components/NativeDesign/TextButton.tsx

@@ -0,0 +1,111 @@
+import React, { useCallback, useState } from 'react';
+import { Platform, StyleProp, ViewStyle, requireNativeComponent } from 'react-native';
+
+/**
+ * 支持的文本按钮样式类型
+ */
+type TextButtonStyleName = 'Black' | 'Gray' | 'Blue';
+
+/**
+ * 尺寸映射（文本按钮通常没有固定高度，但提供最小高度参考）
+ */
+const TEXT_BUTTON_SIZE_MAP: Record<TextButtonStyleName, { minHeight: number }> = {
+  Black: { minHeight: 28 },   // Widget.BitMart4.Button.TextButton.Black
+  Gray: { minHeight: 28 },    // Widget.BitMart4.Button.TextButton.Gray
+  Blue: { minHeight: 28 },    // Widget.BitMart4.Button.TextButton.Blue
+};
+
+interface TextButtonProps {
+  /** 按钮文本 */
+  text: string;
+  /** 按钮样式，支持 "Black", "Gray", "Blue" */
+  styleName?: TextButtonStyleName;
+  /** 是否启用 */
+  enabled?: boolean;
+  /** 点击回调 */
+  onPress?: () => void;
+  /** 样式 */
+  style?: StyleProp<ViewStyle>;
+}
+
+interface NativeSizeChangeEvent {
+  nativeEvent: {
+    width: number;
+    height: number;
+  };
+}
+
+interface NativeTextButtonProps {
+  text: string;
+  styleName?: string;
+  enabled: boolean;
+  onPress?: () => void;
+  onSizeChange?: (event: NativeSizeChangeEvent) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+// Native Components for different platforms
+const NativeTextButton =
+  Platform.OS === 'android'
+    ? requireNativeComponent<NativeTextButtonProps>('TextButton')
+    : requireNativeComponent<NativeTextButtonProps>('TextButtonView');
+
+/**
+ * TextButton - 跨平台文本按钮组件
+ *
+ * Android: 基于 AppCompatButton + ContextThemeWrapper，支持 BitMart4 TextButton 样式
+ * iOS: 基于 UILabel + 手势识别，实现纯文本按钮效果，支持 Black/Gray/Blue 样式
+ *
+ * 按钮宽度会根据文字内容自适应，文字保持单行显示
+ *
+ * @example
+ * ```tsx
+ * <TextButton
+ *   text="确认"
+ *   styleName="Blue"
+ *   onPress={() => console.log('pressed')}
+ * />
+ * ```
+ */
+export const TextButton: React.FC<TextButtonProps> = ({
+  text,
+  styleName = 'Black', // 默认黑色文本样式
+  enabled = true,
+  onPress,
+  style,
+}) => {
+  // 用于存储原生测量的尺寸
+  const [nativeSize, setNativeSize] = useState<{ width: number; height: number } | null>(null);
+
+  const handlePress = useCallback(() => {
+    if (enabled && onPress) {
+      onPress();
+    }
+  }, [enabled, onPress]);
+
+  // 处理原生尺寸变化事件
+  const handleSizeChange = useCallback((event: NativeSizeChangeEvent) => {
+    const { width, height } = event.nativeEvent;
+    setNativeSize({ width, height });
+  }, []);
+
+  // 获取样式对应的尺寸信息
+  const dimensions = TEXT_BUTTON_SIZE_MAP[styleName];
+
+  return (
+    <NativeTextButton
+      text={text}
+      styleName={styleName}
+      enabled={enabled}
+      onPress={handlePress}
+      onSizeChange={handleSizeChange}
+      style={[
+        // 使用原生测量的尺寸（如果有），否则使用默认尺寸
+        nativeSize
+          ? { width: nativeSize.width, height: nativeSize.height }
+          : { minHeight: dimensions.minHeight },
+        style,
+      ]}
+    />
+  );
+};

package/src/components/NativeDesign/index.ts

@@ -0,0 +1,14 @@
+/**
+ * NativeDesign - BitMart Design 组件库的 React Native 桥接组件
+ *
+ * 这些组件使用 Android 的 com.bitmart.android:design 组件库的样式，
+ * 通过 Native Module 桥接到 React Native 中使用。
+ */
+
+export { BMTextButton } from './BMTextButton';
+export type { BMTextButtonStyleType } from './BMTextButton';
+
+export { Button } from './Button';
+export { TextButton } from './TextButton';
+export type { ButtonType, ButtonSize, ButtonStyleName } from './Button';
+export { ButtonStyles } from './ButtonStyles';

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './NativeDesign';

package/src/index.ts

@@ -0,0 +1,4 @@
+// UI Components Library Entry Point
+// Export all UI components here
+
+export * from './components';

package/src/screens/NativeButtonsScreen.tsx

@@ -0,0 +1,335 @@
+import React, { useState } from 'react';
+import {
+  Alert,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { Button, ButtonStyleName, ButtonStyles, TextButton } from '../components/NativeDesign';
+import { IC_BUTTON_SVG } from '../assets/svgs/svgStrings';
+
+const NativeButtonsScreen: React.FC = () => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  const handleButtonPress = (styleName: string) => {
+    Alert.alert('按钮点击', `点击了样式: ${styleName}`);
+  };
+
+  const tabs = [
+    { id: 0, title: '文本按钮' },
+    { id: 1, title: 'Primary' },
+    { id: 2, title: 'Secondary' },
+    { id: 3, title: 'Green' },
+    { id: 4, title: 'Red' },
+    { id: 5, title: 'White' },
+    { id: 6, title: 'Footer' },
+  ];
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case 0: return <TextButtonsTab onButtonPress={handleButtonPress} />;
+      case 1: return <PrimaryButtonsTab onButtonPress={handleButtonPress} />;
+      case 2: return <SecondaryButtonsTab onButtonPress={handleButtonPress} />;
+      case 3: return <GreenButtonsTab onButtonPress={handleButtonPress} />;
+      case 4: return <RedButtonsTab onButtonPress={handleButtonPress} />;
+      case 5: return <WhiteButtonsTab onButtonPress={handleButtonPress} />;
+      case 6: return <FooterButtonsTab onButtonPress={handleButtonPress} />;
+      default: return null;
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      {/* Header */}
+      <View style={styles.header}>
+        <Text style={styles.headerTitle}>Native Buttons</Text>
+      </View>
+
+      {/* Tab 导航 */}
+      <View style={styles.tabContainer}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.tabScrollContent}
+        >
+          {tabs.map((tab) => (
+            <TouchableOpacity
+              key={tab.id}
+              style={[styles.tab, activeTab === tab.id && styles.tabActive]}
+              onPress={() => setActiveTab(tab.id)}
+            >
+              <Text style={[styles.tabText, activeTab === tab.id && styles.tabTextActive]}>
+                {tab.title}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      {/* Tab 内容 */}
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={styles.contentContainer}
+        showsVerticalScrollIndicator={false}
+      >
+        {renderTabContent()}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+// ─── Text Buttons Tab ────────────────────────────────────────────────────────
+
+const TextButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
+  <View style={styles.tabContent}>
+    <SectionTitle title="常规文本按钮" />
+    <View style={styles.buttonGroup}>
+      <TextButton text="Black Text Button" styleName={ButtonStyles.Text.Black} onPress={() => onButtonPress('TextButton.Black')} />
+      <TextButton text="Gray Text Button"  styleName={ButtonStyles.Text.Gray}  onPress={() => onButtonPress('TextButton.Gray')}  style={styles.buttonMargin} />
+      <TextButton text="Blue Text Button"  styleName={ButtonStyles.Text.Blue}  onPress={() => onButtonPress('TextButton.Blue')}  style={styles.buttonMargin} />
+    </View>
+
+    <SectionTitle title="禁用状态" />
+    <View style={styles.buttonGroup}>
+      <TextButton text="Black Text Button (Disabled)" styleName={ButtonStyles.Text.Black} enabled={false} onPress={() => onButtonPress('TextButton.Black.Disabled')} />
+      <TextButton text="Gray Text Button (Disabled)"  styleName={ButtonStyles.Text.Gray}  enabled={false} onPress={() => onButtonPress('TextButton.Gray.Disabled')}  style={styles.buttonMargin} />
+      <TextButton text="Blue Text Button (Disabled)"  styleName={ButtonStyles.Text.Blue}  enabled={false} onPress={() => onButtonPress('TextButton.Blue.Disabled')}  style={styles.buttonMargin} />
+    </View>
+  </View>
+);
+
+// ─── Primary Buttons Tab ─────────────────────────────────────────────────────
+
+const PrimaryButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => {
+  const [loading, setLoading] = useState(false);
+  return (
+    <View style={styles.tabContent}>
+      <SectionTitle title="常规" />
+      <View style={styles.buttonGroup}>
+        {(['XLarge', 'Large', 'Medium', 'Small', 'XSmall', 'XXSmall'] as const).map((size, i) => (
+          <Button key={size} text={`Primary ${size}`} styleName={ButtonStyles.Primary[size]} onPress={() => onButtonPress(`Primary.${size}`)} style={i > 0 ? styles.buttonMargin : undefined} />
+        ))}
+      </View>
+
+      <SectionTitle title="左图标（SVG原生）" />
+      <View style={styles.buttonGroup}>
+        {(['XLarge', 'Large', 'Medium', 'Small', 'XSmall', 'XXSmall'] as const).map((size, i) => (
+          <Button key={size} text="Button" styleName={ButtonStyles.Primary[size]} iconLeft={IC_BUTTON_SVG} onPress={() => onButtonPress(`Primary.${size}.Icon.Leading`)} style={i > 0 ? styles.buttonMargin : undefined} />
+        ))}
+      </View>
+
+      <SectionTitle title="右图标（SVG原生）" />
+      <View style={styles.buttonGroup}>
+        {(['XLarge', 'Large', 'Medium', 'Small', 'XSmall', 'XXSmall'] as const).map((size, i) => (
+          <Button key={size} text="Button" styleName={ButtonStyles.Primary[size]} iconRight={IC_BUTTON_SVG} onPress={() => onButtonPress(`Primary.${size}.Icon.Trailing`)} style={i > 0 ? styles.buttonMargin : undefined} />
+        ))}
+      </View>
+
+      <SectionTitle title="加载状态" rightElement={<LoadingSwitch value={loading} onChange={setLoading} />} />
+      <View style={styles.buttonGroup}>
+        <Button text="Primary XLarge" styleName={ButtonStyles.Primary.XLarge} loading={loading} onPress={() => onButtonPress('Primary.XLarge')} />
+        <Button text="Primary Large"  styleName={ButtonStyles.Primary.Large}  loading={loading} onPress={() => onButtonPress('Primary.Large')}  style={styles.buttonMargin} />
+        <Button text="Primary Medium" styleName={ButtonStyles.Primary.Medium} loading={loading} onPress={() => onButtonPress('Primary.Medium')} style={styles.buttonMargin} />
+        <Button text="Button"         styleName={ButtonStyles.Primary.Large}  loading={loading} iconLeft={IC_BUTTON_SVG} onPress={() => onButtonPress('Primary.Large.Icon.Leading')} style={styles.buttonMargin} />
+      </View>
+
+      <SectionTitle title="禁用状态" />
+      <View style={styles.buttonGroup}>
+        <Button text="Primary Large (Disabled)"  styleName={ButtonStyles.Primary.Large}  enabled={false} onPress={() => onButtonPress('Primary.Large.Disabled')} />
+        <Button text="Primary Medium (Disabled)" styleName={ButtonStyles.Primary.Medium} enabled={false} onPress={() => onButtonPress('Primary.Medium.Disabled')} style={styles.buttonMargin} />
+      </View>
+    </View>
+  );
+};
+
+// ─── Generic Color Tabs (Secondary / Green / Red / White) ────────────────────
+
+type ColorTabProps = { colorKey: 'Secondary' | 'Green' | 'Red' | 'White'; onButtonPress: (style: string) => void };
+
+const ColorButtonsTab: React.FC<ColorTabProps> = ({ colorKey, onButtonPress }) => {
+  const [loading, setLoading] = useState(false);
+  const sizes = ['XLarge', 'Large', 'Medium', 'Small', 'XSmall', 'XXSmall'] as const;
+  const styleMap = ButtonStyles[colorKey] as Record<string, string>;
+
+  return (
+    <View style={styles.tabContent}>
+      <SectionTitle title="常规" />
+      <View style={styles.buttonGroup}>
+        {sizes.map((size, i) => (
+          <Button key={size} text="Button" styleName={styleMap[size] as ButtonStyleName} onPress={() => onButtonPress(`${colorKey}.${size}`)} style={i > 0 ? styles.buttonMargin : undefined} />
+        ))}
+      </View>
+
+      <SectionTitle title="左图标（SVG原生）" />
+      <View style={styles.buttonGroup}>
+        {sizes.map((size, i) => (
+          <Button key={size} text="Button" styleName={styleMap[size] as ButtonStyleName} iconLeft={IC_BUTTON_SVG} onPress={() => onButtonPress(`${colorKey}.${size}.Icon.Leading`)} style={i > 0 ? styles.buttonMargin : undefined} />
+        ))}
+      </View>
+
+      <SectionTitle title="右图标（SVG原生）" />
+      <View style={styles.buttonGroup}>
+        {sizes.map((size, i) => (
+          <Button key={size} text="Button" styleName={styleMap[size] as ButtonStyleName} iconRight={IC_BUTTON_SVG} onPress={() => onButtonPress(`${colorKey}.${size}.Icon.Trailing`)} style={i > 0 ? styles.buttonMargin : undefined} />
+        ))}
+      </View>
+
+      <SectionTitle title="加载状态" rightElement={<LoadingSwitch value={loading} onChange={setLoading} />} />
+      <View style={styles.buttonGroup}>
+        {sizes.slice(0, 4).map((size, i) => (
+          <Button key={size} text="Button" styleName={styleMap[size] as ButtonStyleName} loading={loading} onPress={() => onButtonPress(`${colorKey}.${size}`)} style={i > 0 ? styles.buttonMargin : undefined} />
+        ))}
+      </View>
+    </View>
+  );
+};
+
+const SecondaryButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
+  <ColorButtonsTab colorKey="Secondary" onButtonPress={onButtonPress} />
+);
+const GreenButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
+  <ColorButtonsTab colorKey="Green" onButtonPress={onButtonPress} />
+);
+const RedButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
+  <ColorButtonsTab colorKey="Red" onButtonPress={onButtonPress} />
+);
+const WhiteButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
+  <ColorButtonsTab colorKey="White" onButtonPress={onButtonPress} />
+);
+
+// ─── Footer Buttons Tab ──────────────────────────────────────────────────────
+
+const FooterButtonsTab: React.FC<{ onButtonPress: (style: string) => void }> = ({ onButtonPress }) => (
+  <View style={styles.tabContent}>
+    <SectionTitle title="底部全宽按钮" />
+    <View style={styles.footerButtonGroup}>
+      <Button text="Button" styleName={ButtonStyles.Primary.Large}   fullWidth onPress={() => onButtonPress('Primary.Large')} />
+      <Button text="Button" styleName={ButtonStyles.Secondary.Large} fullWidth onPress={() => onButtonPress('Secondary.Large')} style={styles.footerButtonSpacing} />
+      <View style={styles.footerTwoButtonRow}>
+        <Button text="Button" styleName={ButtonStyles.Secondary.Large} fullWidth onPress={() => onButtonPress('Secondary.Large')} />
+        <Button text="Button" styleName={ButtonStyles.Primary.Large}   fullWidth onPress={() => onButtonPress('Primary.Large')} />
+      </View>
+    </View>
+  </View>
+);
+
+// ─── Shared helpers ──────────────────────────────────────────────────────────
+
+const SectionTitle: React.FC<{ title: string; rightElement?: React.ReactNode }> = ({ title, rightElement }) => (
+  <View style={styles.titleRow}>
+    <Text style={styles.title}>{title}</Text>
+    {rightElement}
+  </View>
+);
+
+const LoadingSwitch: React.FC<{ value: boolean; onChange: (v: boolean) => void }> = ({ value, onChange }) => (
+  <View style={styles.switchRow}>
+    <Text style={styles.switchLabel}>进度条</Text>
+    <Switch value={value} onValueChange={onChange} />
+  </View>
+);
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  header: {
+    height: 56,
+    paddingHorizontal: 16,
+    justifyContent: 'center',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#E0E0E0',
+    backgroundColor: '#FFFFFF',
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#151515',
+  },
+  tabContainer: {
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E0E0E0',
+  },
+  tabScrollContent: {
+    paddingHorizontal: 16,
+  },
+  tab: {
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    marginRight: 8,
+    borderBottomWidth: 2,
+    borderBottomColor: 'transparent',
+  },
+  tabActive: {
+    borderBottomColor: '#2196F3',
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: '400',
+    color: '#666666',
+  },
+  tabTextActive: {
+    fontWeight: '600',
+    color: '#2196F3',
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#FFFFFF',
+  },
+  contentContainer: {
+    paddingBottom: 24,
+  },
+  tabContent: {
+    padding: 24,
+  },
+  titleRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  title: {
+    flex: 1,
+    fontSize: 20,
+    fontWeight: '600',
+    color: '#151515',
+  },
+  switchRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  switchLabel: {
+    fontSize: 14,
+    color: '#666666',
+  },
+  buttonGroup: {
+    alignItems: 'center',
+    marginBottom: 32,
+  },
+  buttonMargin: {
+    marginTop: 16,
+  },
+  footerButtonGroup: {
+    width: '100%',
+    alignSelf: 'stretch',
+  },
+  footerButtonSpacing: {
+    marginTop: 16,
+  },
+  footerTwoButtonRow: {
+    flexDirection: 'row',
+    width: '100%',
+    marginTop: 16,
+    gap: 16,
+  },
+});
+
+export default NativeButtonsScreen;

package/src/types/global.d.ts

@@ -0,0 +1,14 @@
+import { ModuleRegistry } from '../multi-bundle/ModuleRegistry';
+export {};
+
+declare global {
+  var __ModuleRegistry: typeof ModuleRegistry;
+  
+  // React Native 环境中的 process.env 类型定义
+  namespace NodeJS {
+    interface ProcessEnv {
+      MODULE_DEBUG?: string;
+      NODE_ENV?: 'development' | 'production' | 'test';
+    }
+  }
+}