Text 组件介绍

  • 在 React Native 用于显示文本的组件就是 Text，和iOS中的 UIlabel，Android中的 TextView类似，专门用来显示基本的文本信息，处理基本的显示布局外，还可以进行嵌套显示，设置样式，已经事件处理（如：点击事件）

Text 组件常用的属性和方法

  • color：字体颜色

        // 字体颜色
    color:'blue'

    效果：


  • numberOfLines：设置 Text 显示文本的行数，如果显示的内容超过行数，默认其余的文本信息不再显示

        render() {
        return (            <View style={styles.container}>                <Text style={styles.textStyle} numberOfLines={3}>雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest</Text>            </View>
        );
    }

    效果：

  • fontSize：字体大小

        // 字体大小    fontSize:30

    效果：

  • fontFamily：字体名称

        // 字体类型
    fontFamily:'Georgia'

    效果：

  • fontStyle（'normal', 'italic'）：字体风格

        // 字体风格
    fontStyle:'italic'

    效果：

  • fontWeight（'normal', 'bold', '100 ~ 900'）：指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值

        // 字体粗细
    fontWeight:('bold', '700')

    效果：

  • textShadowOffset（width: number, height: number）：设置阴影效果

  • textShadowColor：阴影效果颜色

        // 阴影    textShadowOffset:{width:3, height:5},    // 阴影颜色    textShadowColor:'black'

    效果：

  • textShadowRadius：阴影效果圆角（值越大阴影越模糊）

        // 阴影圆角    textShadowRadius:3

    效果：

  • letterSpacing：字符间距

        // 字符间距    letterSpacing:5

    效果：

  • lineHeight：行高

        // 行高    lineHeight:25

    效果：

  • textAlign（'auto', 'left', 'right', 'center', 'justify'）：文本对齐方式

        // 文本对齐方式
    textAlign:'auto'

    效果：

        // 文本对齐方式
    textAlign:'left'

    效果：

        // 文本对齐方式
    textAlign:'right'

    效果：

        // 文本对齐方式
    textAlign:'center'

    效果：

        // 文本对齐方式
    textAlign:'justify'

    效果：

    • justify


    • center


    • right


    • left


    • auto


  • textDecorationLine（'none', 'underline', 'line-through'）：横线位置

        // 横线
    textDecorationLine:'underline'

    效果：

        // 横线
    textDecorationLine:'line-through'

    效果：

    • line-through:


    • none：没有横线

    • underline：


  • textDecorationStyle（'solid', 'double', 'dotted', 'dashed'）：线风格

        // 横线风格
    textDecorationStyle:'solid'

    效果：

        // 横线风格
    textDecorationStyle:'double'

    效果：

        // 横线风格
    textDecorationStyle:'dotted'

    效果：

        // 横线风格
    textDecorationStyle:'dashed'

    效果：

    • dashed


    • dotted


    • double


    • solid


  • textDecorationColor：线的颜色

        // 线的颜色
    textDecorationColor:'black',

    效果：

  • allowFontScaling：控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放

  • adjustsFontSizeToFit：指定字体是否随着给定样式的限制而自动缩放

  • minimumFontScale：当adjustsFontSizeToFit开启时，指定最小的缩放比（即不能低于这个值）。可设定的值为0.01 - 1.0

  • suppressHighlighting：当为true时，如果文本被按下，则没有任何视觉效果。默认情况下，文本被按下时会有一个灰色的、椭圆形的高光

  • selectable：决定用户是否可以长按选择文本，以便复制和粘贴

        render() {
        return (            <View style={styles.container}>                <Text style={styles.textStyle}                    selectable={true}
                >
                    雨泽Forest                </Text>            </View>
        );
    }

    效果：

  • testID：用来在端到端测试中标记这个视图

  • onPress：当文本发生点击的时候调用该方法

        render() {
        return (            <View style={styles.container}>                <Text style={styles.textStyle}                    onPress={()=>{alert('点击')}}
                >
                    雨泽Forest                </Text>            </View>
        );
    }

    效果：

  • onLongPress：当文本被长按以后调用此回调函数（参考onPress）

  • onLayout：当挂载或者布局变化以后调用（参数为：{nativeEvent: {layout: {x, y, width, height}}}）(参考onPress)

Text 使用

  • 视图部分

        render() {
        return (            <View style={styles.container}>                <Text style={styles.textStyle}>雨泽Forest</Text>            </View>
        );
    }

  • 样式部分

        var styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'green',
        },

        textStyle: {            // 背景色
            backgroundColor:'yellow',            // 字体大小
            fontSize:30,            // 下划横线
            textDecorationLine:'underline'
        }

    });

    效果：

Text 组件的嵌套使用

  • 视图部分

        var test = React.createClass({
        render() {
            return (                <View style={styles.container}>                    <Text style={styles.textStyle} numberOfLines={3}>
                    雨泽                    <Text style={{color:'orange'}}>
                            Forest                    </Text>                    </Text>                </View>
            );
        }
    });

  • 样式部分

        var styles = StyleSheet.create({        container: {            flex: 1,            justifyContent: 'center',            alignItems: 'center',            backgroundColor: 'green',
        },        textStyle: {
            // 字体颜色            color:'blue',
            // 字体大小            fontSize:30
        }

    });

    效果：

Text 组件中样式的继承

  • 在 React Native 中是没有样式继承这种说法的，但对于 Text 元素里边的 Text 元素，其实是可以继承的，至于是单继承还是多继承，我们可以来试验一下

        var test = React.createClass({
        render() {
            return (                <View style={styles.container}>                    <Text style={styles.textStyle} numberOfLines={3}>                        <Text>                            <Text>雨泽Forest</Text>                        </Text>                    </Text>                </View>
            );
        }
    });
        var styles = StyleSheet.create({        container: {            flex: 1,            justifyContent: 'center',            alignItems: 'center',            backgroundColor: 'green',
        },        textStyle: {
            // 字体颜色            color:'blue',
            // 字体大小            fontSize:30
        }

    });

    效果：

    • 样式部分


    • 视图部分


  • 通过试验我们可以看出，文字控制类的属性也是多继承的，和 CSS 是一样的,而且会取与自己最近的属性归自己所用，也就是说属性可覆盖