# rox-text

> --- subtitle: 文本 group: General ---

Latest version **0.0.36** (published 2018-07-06) · 0 weekly downloads

## Install

```sh
npm install rox-text
pnpm add rox-text
yarn add rox-text
bun add rox-text
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.36 |
| Published | 2018-07-06 |
| First published | 2018-01-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | basemoz, leozdgao, qoder, ylb, zhoukekestar |
| Keywords | rox, rox-components |

## Links

- npm: https://www.npmjs.com/package/rox-text
- npm.io page: https://npm.io/package/rox-text

## Dependencies (1)

- [nuke-text](https://npm.io/package/nuke-text.md) ^0.0.12

## Recent versions

- 0.0.36 (latest) — 2018-07-06
- 0.0.35 — 2018-07-05
- 0.0.39 — 2018-06-28
- 0.0.34 — 2018-04-03
- 0.0.33 — 2018-04-03
- 0.0.32 — 2018-03-14
- 0.0.31 — 2018-03-07
- 0.0.30 — 2018-03-07
- 0.0.29 — 2018-03-05
- 0.0.28 — 2018-03-01
- 0.0.27 — 2018-02-24
- 0.0.26 — 2018-02-23
- 0.0.25 — 2018-02-06
- 0.0.22 — 2018-02-01
- 0.0.21 — 2018-02-01
- … 8 more at https://npm.io/package/rox-text/versions

## README

---
subtitle: 文本
group: General
---

# Text

Text 用于显示文本，在 web 端即 `<span>` 标签。

**注意： Text 标签不支持嵌套，嵌套使用可能会导致意想不到的结果。**

---


## API

参数 | 说明 | 类型 | 默认值
-----|-----|-----|-----
style | 样式 | object|{display:'block',fontSize:32}
onPress | 点击事件 | function
numberOfLines| 显示的行数|number
fixedFont|字体大小是否固定，默认 false ，即跟随屏幕宽度缩放|false

### 关于 numberOfLines 控制多行文本

```js
// 超出 2 行隐藏且显示省略号
<View style={{backgroundColor: '#cccccc'}}>
  <Text numberOfLines={2}  style={{
    fontSize: 28,
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    color: '#333333',
    lineHeight: 48,
    height: 48*2
    }}>
    Different from a "web app", "HTML5 app", or "hybrid app", you can use Weex to build a real mobile app.
  </Text>
</View>
```

### 关于 fixedFont

由于 rem 单位是根据屏幕宽度计算而自动缩放的：

```
750rem = 1 deviceWidth
```

因此，`<Text style={{fontSize: 28}}>123</Text>` 实际算出来的字号也是随着屏幕宽度缩放的。

某些场景下，为了避免屏幕超大、超小导致文字过大或过小，你可以选择 fixedFont 来固化字号的显示。

例如：`<Text style={{fontSize: 28}} fixedFont={true}>123</Text>` 这意味字体实际字号将被解析为：

````
web: 14px;
native iOS: 14 dp;
native android: 14 pt;
````

native 端的 `dp` `pt` 确保了字号在任何不同 dpi 的手机屏幕上显示不会发生改变。

---
_Source: https://npm.io/package/rox-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._