weex-nuke/lib/node_modules/nuke-text/README.md

基于 Rax 、Weex 的高性能组件体系 ~~

# 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" />