# nuke-text

> 文本

Latest version **2.3.12** (published 2019-09-26) · Apache-2.0 license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.12 |
| Published | 2019-09-26 |
| First published | 2017-05-10 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 49.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | leanhunter |
| Maintainers | doub, leanhunter |
| Keywords | nuke, nuke-text |

## Links

- npm: https://www.npmjs.com/package/nuke-text
- Repository: git@gitlab.alibaba-inc.com:nuke/text
- npm.io page: https://npm.io/package/nuke-text

## Dependencies (1)

- [nuke-helper](https://npm.io/package/nuke-helper.md) ^2.3.12

## Recent versions

- 2.3.12 (latest) — 2019-09-26
- 2.1.3 (beta) — 2018-08-15
- 2.3.11 — 2019-09-26
- 2.3.10 — 2019-09-26
- 2.3.9 — 2019-09-26
- 2.3.8 — 2019-09-25
- 2.3.7 — 2019-07-24
- 2.3.6 — 2019-07-19
- 2.3.5 — 2019-07-02
- 2.3.4 — 2019-05-10
- 2.3.3 — 2019-04-28
- 2.3.2 — 2019-01-15
- 2.3.0 — 2018-11-14
- 2.2.29 — 2018-10-09
- 2.2.28 — 2018-10-09
- … 52 more at https://npm.io/package/nuke-text/versions

## README

# Text

* category: Components
* chinese: 文本
* type: 基本

---

## 设计思路
Text 用于显示文本，在 web 端即 `<span>` 标签。

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

## API

| 参数          | 说明                                              | 类型     | 默认值                        |
| ------------- | ------------------------------------------------- | -------- | ----------------------------- |
| style         | 样式,默认 32                                      | 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 的手机屏幕上显示不会发生改变。

### 全局字体
在部分支持自定义字体的客户端中，你可能需要将全局字体进行自定义设置。配合[nuke-theme-provider],或直接注入`context`,
如下eg:

```
    <StyleProvider commonConfigs={{ fontFamily: 'OpenSans-bold' }}>
        <Text>中文</Text>
        <Button>按钮</Button>
        <Icon></Icon>
    </StyleProvider>
```
即可完成全局字体的替换,包括使用了Text组件而未设置字体的其他UI组件

PS: 已经设置了字体family的Icon不受影响，和Text不受影响。



### RTL

RTL 排版与国际化 demo
```
const rtlText = 'مرحبا كيف حالك؟';
<Text style={{ fontSize: 28, textAlign: 'right', direction: 'rtl' }}>
  {rtlText}
</Text>
```

## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />

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