Text

一个展示文本的React组件

Text支持嵌套和样式,未来版本的样式可以从父Text继承过来。

属性

numberOfLines?:  [number]

当文本过长时裁剪文本。包括折叠产生的换行在内,总的行数不会超过这个属性的限制。

通常和ellipsizeMode一起使用。

onLayout?:  function

加载完之后回调,可以用下面的代码改变:

{nativeEvent: { layout:{' {'}x, y, width, height}}}

onLongPress?:  function

长按的回调

e.g.,onLongPress{'={'}this.increaseSize}>

onPress?:  function

按下的回调

e.g.,onLongPress{'={'}() => console.log('1st')}

style?:  style
      View#style...  查看左侧导航的"View"的属性
      color   color
      fontSize   number
      fontWeight   enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')

      指定字体的粗细,其中大多数字体都支持'normal'和'bold',并不是所有字体的粗细用数字

      都有变化,选最接近的那个数字就行。

      lineHeight   number
      textAlign   enum('auto', 'left', 'right', 'center', 'justify')

      'justify'只在ios上生效,而left只在android上生效

android includeFontPadding    bool

设置为 false 将移除在父view中的padding的空间,有些字体有了padding在垂直方向上会更细些,

更好的效果是设置textAlignVertical设置为居中,默认是true。

android textAlignVertical   enum('auto', 'top', 'bottom', 'center')

描述

容器

<Text>元素在布局上不同于其他组件,在<Text>内部的元素使用文本布局,不使用flexbox布局,这

就是说<Text>内部的元素不再是矩形,可能会在行末折叠。

<Text>

  <Text>First part and </Text>

  <Text>second part </Text>

</Text>


// Text 容器: Text会换行的,这个容器相当于是一行

// |First part |

// |and second |

// |part |

相反:

<View>

  <Text>First part and </Text>

  <Text>second part </Text>

</View>


// View 容器: 每个文本是一行

// |First part |

// |and |

// |second part |

样式继承限制

所有的文字都要包裹在<Text>组件内,文字不能直接放在<View>内,Web上给整个document设

置字体和大小是可以的,但在React VR上我们要求更严些,不能这么设置。

// BAD:在<View>里面包裹文字会报错的

<View>

  Some text

</View>

// GOOD

<View>

  <Text>

    Some text

  </Text>

</View>

你不能给整个子组件设置一个默认的字体,为了保持应用里面的字体和字体大小一致,你需要创建

一个MyAppText组件来包裹它们,你也可以继承这个组件做些如MyAppHeaderText样的特殊的组件。

<View>

  <MyAppText>Text styled  with the default font  for the entire application</MyAppText>

  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>

</View>

使用的文本和尺寸一致的组件,就是创建这个有相关样式的组件MyAppTextMyAppHeaderText可以

这样定义:

class MyAppHeaderText extends Component {

  render() {

    <MyAppText>

      <Text style={{fontSize: 1}}>

        {this.props.children}

      </Text>

    </MyAppText>

  }

}

这样组成MyAppText能保证我们从最上层的组件拿到样式,也让我们能增加或者复写它们。

React VR目前还不支持React Native那样继承给文本子树的样式。