---
name: "Text"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Text - 文本内容"
---

## Text

> [VERSION] @ray-js/ray >= 0.5.10

### 描述

文本内容组件，用于显示文本信息。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 废弃 | 描述 |
| --- | --- | --- | --- | --- | --- |
| `userSelect` | `boolean` | 否 | `false` | - | 文本是否可选 |
| `selectable` | `boolean` | 否 | - | 是: 请使用 userSelect 替代 | 文本是否可选 |

### 示例代码

#### 基础用法

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 16, color: '#333' }}>这是一段普通文本</Text>
    </View>
  );
}
```

#### 可选择文本

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <Text userSelect style={{ fontSize: 16, color: '#007aff', lineHeight: '24px' }}>
        这段文字设置了 userSelect，长按可以选中并复制。
      </Text>
      <Text style={{ fontSize: 16, marginTop: 12, color: '#999' }}>
        这段文字未设置 userSelect，无法选中。
      </Text>
    </View>
  );
}
```