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

package/ios/DemoProject/NativeDesign/TextButtonViewManager.swift

@@ -0,0 +1,184 @@
+//
+//  TextButtonViewManager.swift
+//  BitMartUS
+//
+//  Created by React Native on 2026/01/24.
+//
+
+import UIKit
+import React
+import BMTheme
+import BMUIComponents
+import SnapKit
+
+/// iOS 原生文本按钮 ViewManager - 对应 Android 的 TextButtonViewManager
+/// 实现纯文本按钮，无背景，支持 Black/Gray/Blue 样式
+@objc(TextButtonViewManager)
+class TextButtonViewManager: RCTViewManager {
+
+    override static func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+
+    override func view() -> UIView! {
+        return TextButtonView()
+    }
+}
+
+/// iOS 原生文本按钮视图 - 纯文本按钮实现
+class TextButtonView: UIView {
+
+    // MARK: - Properties
+    private let textLabel: UILabel
+    private var currentStyleName: String = "Black"
+
+    /// RN 事件回调
+    @objc var onPress: RCTBubblingEventBlock?
+    @objc var onSizeChange: RCTDirectEventBlock?
+
+    // MARK: - Initialization
+    override init(frame: CGRect) {
+        textLabel = UILabel()
+        super.init(frame: frame)
+        setupButton()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    // MARK: - Setup
+    private func setupButton() {
+        // 设置为可点击
+        isUserInteractionEnabled = true
+
+        // 配置文本标签
+        textLabel.textAlignment = .center
+        textLabel.numberOfLines = 1
+        textLabel.adjustsFontSizeToFitWidth = false
+        textLabel.lineBreakMode = .byTruncatingTail
+
+        // 添加标签到容器
+        addSubview(textLabel)
+
+        // 设置约束 - 标签填充整个容器
+        textLabel.snp.makeConstraints { make in
+            make.edges.equalToSuperview()
+        }
+
+        // 添加点击手势
+        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(buttonTapped))
+        addGestureRecognizer(tapGesture)
+
+        // 应用默认样式
+        applyStyle(currentStyleName)
+
+        // 发送初始尺寸
+        sendSizeChangeEvent()
+    }
+
+    // MARK: - Event Handlers
+    @objc private func buttonTapped() {
+        if isUserInteractionEnabled {
+            onPress?([:])
+        }
+    }
+
+    private func sendSizeChangeEvent() {
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self else { return }
+            let size = self.intrinsicContentSize
+
+            self.onSizeChange?([
+                "width": size.width,
+                "height": size.height
+            ])
+        }
+    }
+
+    // MARK: - RN Props
+
+    /// 设置按钮文本
+    @objc var text: NSString = "" {
+        didSet {
+            textLabel.text = text as String
+            sendSizeChangeEvent()
+        }
+    }
+
+    /// 设置样式名称
+    @objc var styleName: NSString = "Black" {
+        didSet {
+            let styleNameStr = styleName as String
+            if currentStyleName != styleNameStr {
+                currentStyleName = styleNameStr
+                applyStyle(styleNameStr)
+                sendSizeChangeEvent()
+            }
+        }
+    }
+
+    /// 设置启用状态
+    @objc var enabled: Bool = true {
+        didSet {
+            isUserInteractionEnabled = enabled
+            alpha = enabled ? 1.0 : 0.5
+        }
+    }
+
+    // MARK: - Style Application
+
+    /// 应用文本按钮样式
+    private func applyStyle(_ styleName: String) {
+        // 设置字体 - 使用统一的文本按钮字体
+        textLabel.font = .S4Font  // 14pt Medium，与Android TextButton对应
+
+        // 根据样式名称设置文字颜色
+        switch styleName.lowercased() {
+        case "black":
+            textLabel.cexTheme.textColor = .primaryColor     // 对应 bm4_color_primary
+        case "gray":
+            textLabel.cexTheme.textColor = .secondaryColor   // 对应 bm4_color_secondary
+        case "blue":
+            textLabel.cexTheme.textColor = .brandColor       // 对应 bm4_color_brand
+        default:
+            textLabel.cexTheme.textColor = .primaryColor
+        }
+
+        // 确保背景透明（文本按钮特征）
+        backgroundColor = .clear
+    }
+
+    // MARK: - Layout
+    override var intrinsicContentSize: CGSize {
+        // 让标签自己计算尺寸
+        textLabel.sizeToFit()
+        let labelSize = textLabel.sizeThatFits(CGSize(width: CGFloat.greatestFiniteMagnitude, height: 28))
+
+        // 文本按钮最小高度28pt，宽度根据文本内容
+        return CGSize(width: max(labelSize.width, 20), height: max(labelSize.height, 28))
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        // UILabel 会自动处理布局
+    }
+
+    // MARK: - Touch Feedback
+    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesBegan(touches, with: event)
+        if isUserInteractionEnabled {
+            alpha = 0.7  // 点击时降低透明度
+        }
+    }
+
+    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesEnded(touches, with: event)
+        alpha = enabled ? 1.0 : 0.5  // 恢复透明度
+    }
+
+    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesCancelled(touches, with: event)
+        alpha = enabled ? 1.0 : 0.5  // 恢复透明度
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bm-fe/react-native-ui-components",
-  "version": "1.0.1",
+  "version": "1.1.3",
   "description": "React Native UI Components Library",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -10,6 +10,13 @@
     "src/screens",
     "src/types",
     "src/index.ts",
+    "android/design/src",
+    "android/design/build.gradle",
+    "android/design/proguard-rules.pro",
+    "android/design/consumer-rules.pro",
+    "ios/DemoProject/NativeDesign",
+    "react-native-ui-components.podspec",
+    "react-native.config.js",
     "README.md",
     "LICENSE"
   ],

package/react-native-ui-components.podspec

@@ -0,0 +1,23 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-ui-components"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = "https://github.com/bm-fe/react-native-ui-components"
+  s.license      = { :type => "MIT", :file => "LICENSE" }
+  s.authors      = { "bm-fe" => "bm-fe@bitmart.com" }
+  s.platforms    = { :ios => "13.0" }
+  s.source       = { :git => "", :tag => "#{s.version}" }
+
+  # iOS 原生桥接代码（ViewManager）
+  s.source_files = "ios/DemoProject/NativeDesign/**/*.{h,m,swift}"
+
+  s.dependency "React-Core"
+  s.dependency "BMUIComponents"
+  s.dependency "SDWebImage"
+  s.dependency "SDWebImageSVGCoder"
+  s.dependency "SnapKit"
+end

package/react-native.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        // Android 原生模块目录（包含 build.gradle 和 Kotlin 源码）
+        sourceDir: './android/design',
+        packageImportPath: 'import com.bitmart.react.design.DesignComponentPackage;',
+        packageInstance: 'new DesignComponentPackage()',
+      },
+      ios: {
+        // iOS podspec 路径（用于 CocoaPods 自动链接）
+        podspecPath: './react-native-ui-components.podspec',
+      },
+    },
+  },
+};

package/src/screens/NativeButtonsScreen.tsx

@@ -1,335 +0,0 @@
-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;