vida-text-label-component

React Native 文本标签组件，支持自定义文本样式、自动字号调整、垂直翻转等功能。

安装

npm install vida-text-label-component

使用方法

基本用法

import React, { useRef } from 'react';
import { TextLabel, TextLabelCommands } from 'vida-text-label-component';

function App() {
  const labelRef = useRef<any>();

  return (
    <TextLabel
      style={{ width: 200, height: 100 }}
      ref={labelRef}
      onInfoUpdate={(event) => {
        console.log('文本信息更新:', event.nativeEvent.result);
      }}
      onheightUpdate={(event) => {
        console.log('高度更新:', event.nativeEvent.result);
      }}
    />
  );
}

使用命令

import React, { useRef } from 'react';
import { TextLabel, TextLabelCommands } from 'vida-text-label-component';

function App() {
  const labelRef = useRef<any>();

  const handleGetInfo = () => {
    // 获取最新的文本信息
    TextLabelCommands.getNativeInfo(labelRef.current);
  };

  const handleRedraw = () => {
    // 重新绘制文本
    TextLabelCommands.redraw(labelRef.current, [{
      content: "新的文本内容",
      textSize: 16,
      isBold: true,
      isItalic: false,
      hAlignment: 2, // 居中对齐
      textColor: 0xFF0000 // 红色
    }]);
  };

  return (
    <TextLabel
      style={{ width: 200, height: 100 }}
      ref={labelRef}
      onInfoUpdate={(event) => {
        console.log('文本信息更新:', event.nativeEvent.result);
      }}
      onheightUpdate={(event) => {
        console.log('高度更新:', event.nativeEvent.result);
      }}
    />
  );
}

API

Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | style | ViewStyle | - | 组件样式 | | onInfoUpdate | function | - | 文本信息更新回调 | | onheightUpdate | function | - | 高度更新回调 |

命令

| 命令 | 参数 | 描述 | |------|------|------| | getNativeInfo | viewRef | 获取最新的文本信息 | | redraw | viewRef, data | 重新绘制文本，data为文本属性对象 |

文本属性

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | content | string | "" | 文本内容 | | textSize | number | 12 | 字体大小 | | isBold | boolean | false | 是否粗体 | | isItalic | boolean | false | 是否斜体 | | isUnderline | boolean | false | 是否下划线 | | isStrikethrough | boolean | false | 是否删除线 | | isFlipX | boolean | false | 是否水平翻转 | | isFlip | boolean | false | 是否垂直翻转 | | linesSpace | number | 0 | 行间距 | | wordSpace | number | 0 | 字间距 | | isAutoFontSize | boolean | false | 是否自动字号 | | hAlignment | number | 1 | 水平对齐方式 (1:左对齐, 2:居中, 3:右对齐) | | textColor | number | 0xFF000000 | 文本颜色 | | hintText | string | "" | 提示文本 |

特性

• ✅ 支持自定义文本样式（粗体、斜体、下划线、删除线）
• ✅ 支持文本对齐方式（左对齐、居中、右对齐）
• ✅ 支持自动字号调整
• ✅ 支持垂直翻转
• ✅ 支持水平翻转
• ✅ 支持行间距和字间距调整
• ✅ 支持自定义文本颜色
• ✅ 支持提示文本
• ✅ 实时高度更新回调

平台支持

• ✅ Android
• ❌ iOS (暂不支持)

许可证

MIT