Text

参考文档

一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。

属性

style 属性

类型：style   非必填参数

• View Style Props...
• textShadowOffset: object: {width: number,height: number}
• color: color

• fontSize: number

• fontStyle: enum('normal', 'italic')

• 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支持，在Android上会变为left。

• textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through')

• textShadowColor: color

• fontFamily: string

• textShadowRadius: number

• includeFontPadding: bool (Android)

Android在默认情况下会为文字额外保留一些padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为false。默认值为true。

• textAlignVertical: enum('auto', 'top', 'bottom', 'center') (Android)

• fontVariant: array of enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums') (iOS)

• letterSpacing: number
  增大或减小字符之间的间距。 缺省值为0，没有额外的字母间距。

iOS：每个字形后都会呈现额外的空间。

Android：自Android 5.0起仅受支持-较旧的版本将忽略此属性。 请注意，字形周围将增加额外的空间（每侧一半），这与iOS渲染有所不同。 可以通过使用布局属性来模拟iOS渲染，例如 负边距，具体取决于您的情况。

• textDecorationColor: color (iOS)

• textDecorationStyle: enum('solid', 'double', 'dotted', 'dashed') (iOS)

• writingDirection: enum('auto', 'ltr', 'rtl') (iOS)

嵌套文本

在iOS和Android中显示格式化文本的方法类似，都是提供你想显示的文本内容，然后使用范围标注来指定一些格式（在iOS上是用NSAttributedString，Android上则是SpannableString）。这种用法非常繁琐。在React Native中，决定采用和Web一致的设计，这样你可以把相同格式的文本嵌套包裹起来：

import React, { Component } from 'react';
import {  Text,StyleSheet } from 'react-native';
export  class pageComponent extends Component {
    render() {
        return (
            <Text style={styles.bold}>
                I am bold
                <Text style={styles.red}>
                    and red
                </Text>
            </Text>
        );
    }
}
const styles = StyleSheet.create({
    bold: {
        fontWeight: 'bold'
    },
    red: {
        color: "red"
    },
});

而实际上在框架内部，这会生成一个扁平结构的NSAttributedString或是SpannableString，包含以下信息：

"I am bold and red"
0-9: bold
9-17: bold, red

嵌套视图（仅限iOS）

在iOS上，您可以将视图嵌套在Text组件中。 示例：

import React, { Component } from 'react';
import { Text, View, StyleSheet} from 'react-native';
export  class pageComponent extends Component {
    render() {
        return (
            <Text>
                There is a blue square
                <View style={styles.text} />
                in between my text.
            </Text>
        );
    }
}
const styles = StyleSheet.create({
    text: {
        width: 50,
        height: 50,
        backgroundColor: 'steelblue'
    },
});

为了使用此功能，必须给视图指定宽度和高度。

容器

<Text>元素在布局上不同于其它组件：在Text内部的元素不再使用flexbox布局，而是采用文本布局。这意味着<Text>内部的元素不再是一个个矩形，而可能会在行末进行折叠。

<Text>
  <Text>First part and </Text>
  <Text>second part</Text>
</Text>
// Text container: all the text flows as if it was one
// |First part |
// |and second |
// |part       |

<View>
  <Text>First part and </Text>
  <Text>second part</Text>
</View>
// View container: each text is its own block
// |First part |
// |and        |
// |second part|

样式继承限制

在Web上，要想指定整个文档的字体和大小，只需要写：

/* 这段代码是CSS, *不是*React Native */
html {
  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
  font-size: 11px;
  color: #141823;
}

当浏览器尝试渲染一个文本节点的时候，它会在树中一路向上查询，直到根节点，来找到一个具备font-size属性的元素。这个系统一个不好的地方在于任何节点都可能会有font-size属性，包括<div>标签。这个设计为了方便而设计，但实际上语义上并不太正确。

在React Native中，把这个问题设计的更加严谨：你必须把你的文本节点放在<Text>组件内。你不能直接在<View>下放置一段文本。

// 错误的做法：会导致一个错误。<View>下不能直接放一段文本。
<View>
  一些文本
</View>

// 正确的做法
<View>
  <Text>
    一些文本
  </Text>
</View>

并且你也不能直接设置一整颗子树的默认样式。使用一个一致的文本和尺寸的推荐方式是创建一个包含相关样式的组件MyAppText，然后在你的App中反复使用它。你还可以创建更多特殊的组件譬如MyAppHeaderText来表达不同样式的文本。

<View>
  <MyAppText>这个组件包含了一个默认的字体样式，用于整个应用的文本</MyAppText>
  <MyAppHeaderText>这个组件包含了用于标题的样式</MyAppHeaderText>
</View>

假设MyAppText是一个仅使用样式将其子对象呈现为Text组件的组件，则可以如下定义MyAppHeaderText：

class MyAppHeaderText extends Component {
  render() {
    <MyAppText>
      <Text>{this.props.children}</Text>
    </MyAppText>;
  }
}

以这种方式编写MyAppText可确保从顶级组件获取样式，但使无法在特定的用例中添加/覆盖样式。

React Native实际上还是有一部分样式继承的实现，不过仅限于文本标签的子树。在下面的代码里，第二部分会在加粗的同时又显示为红色：

import React, { Component } from 'react';
import {  Text,StyleSheet } from 'react-native';
export  class pageComponent extends Component {

    render() {
        return (
            <Text style={styles.bold}>
                I am bold
                <Text style={styles.color}>and red</Text>
            </Text>
        );
    }
}
const styles = StyleSheet.create({
    bold: {
        fontWeight: "bold"
    },
    color: {
        color: "red"
    },
});

相信这种看起来不太舒服的给文本添加样式的方法反而会帮助生产更好的App：

• (对开发者来说) React组件在概念上被设计为强隔离性的：你应当可以在应用的任何位置放置一个组件，而且只要属性相同，其外观和表现都将完全相同。文本如果能够继承外面的样式属性，将会打破这种隔离性。

• (对实现者来说) React Native的实现也被简化了。不需要在每个元素上都添加一个fontFamily字段，并且也不需要隐含地在显示文本的时候向上遍历树。唯一的样式继承在原生Text组件中编码，也不会影响到其它组件或者系统本身。

Example

示例

在下面的例子里，嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式，不过标题上还附加了它自己额外的样式。标题和文本会在顶部依次堆叠，并且被代码中内嵌的换行符分隔开。

import React, { Component } from 'react';
import {  Text,StyleSheet } from 'react-native';
export  class pageComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            titleText: "Bird's Nest",
            bodyText: 'This is not really a bird nest.'
        };
    }
    onPressTitle=()=>{
        alert('点击了文字11')
    }
    render() {
        return (
            <Text style={styles.baseText}>
                <Text style={styles.titleText} onPress={this.onPressTitle}>
                    {this.state.titleText}{'\n'}{'\n'}
                </Text>
                <Text numberOfLines={5}>
                    {this.state.bodyText}
                </Text>
            </Text>
        );
    }
}
const styles = StyleSheet.create({
    baseText: {
        fontFamily: 'Cochin',
    },
    titleText: {
        fontSize: 20,
        fontWeight: 'bold',
    },
});