React-Native 之 Text的使用

时间:2022-09-04 09:58:16

前言

  • 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习

  • 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢

  • 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢

Text 组件介绍


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

Text 组件常用的属性和方法


  • color:字体颜色

        // 字体颜色
        color:'blue'
    

    效果:

React-Native 之 Text的使用

  • 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>
            );
        }
    
    效果:
    React-Native 之 Text的使用
  • fontSize:字体大小

        // 字体大小
        fontSize:30
    
    效果:
    React-Native 之 Text的使用
  • fontFamily:字体名称

        // 字体类型
        fontFamily:'Georgia'
    
    效果:
    React-Native 之 Text的使用
  • fontStyle('normal', 'italic'):字体风格

        // 字体风格
        fontStyle:'italic'
    
    效果:
    React-Native 之 Text的使用
  • fontWeight('normal', 'bold', '100 ~ 900'):指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持,则会自动选择最接近的值

        // 字体粗细
        fontWeight:('bold', '700')
    
    效果:
    React-Native 之 Text的使用
  • textShadowOffset(width: number, height: number):设置阴影效果

  • textShadowColor:阴影效果颜色

        // 阴影
        textShadowOffset:{width:3, height:5},
        // 阴影颜色
        textShadowColor:'black'
    
    效果:
    React-Native 之 Text的使用
  • textShadowRadius:阴影效果圆角(值越大阴影越模糊)

        // 阴影圆角
        textShadowRadius:3
    
    效果:
    React-Native 之 Text的使用
  • letterSpacing:字符间距

        // 字符间距
        letterSpacing:5
    
    效果:
    React-Native 之 Text的使用
  • lineHeight:行高

        // 行高
        lineHeight:25
    
    效果:
    React-Native 之 Text的使用
  • textAlign('auto', 'left', 'right', 'center', 'justify'):文本对齐方式
    • auto


        // 文本对齐方式
        textAlign:'auto'
    
    效果:
    React-Native 之 Text的使用
    • left


        // 文本对齐方式
        textAlign:'left'
    
    效果:
    React-Native 之 Text的使用
    • right


        // 文本对齐方式
        textAlign:'right'
    
    效果:
    React-Native 之 Text的使用
    • center


        // 文本对齐方式
        textAlign:'center'
    
    效果:
    React-Native 之 Text的使用
    • justify


        // 文本对齐方式
        textAlign:'justify'
    效果:
    React-Native 之 Text的使用
  • textDecorationLine('none', 'underline', 'line-through'):横线位置
    • none:没有横线
    • underline:


        // 横线
        textDecorationLine:'underline'
    
    效果:
    React-Native 之 Text的使用
    • line-through:


        // 横线
        textDecorationLine:'line-through'
    
    效果:
    React-Native 之 Text的使用
  • textDecorationStyle('solid', 'double', 'dotted', 'dashed'):线风格
    • solid


        // 横线风格
        textDecorationStyle:'solid'
    
    效果:
    React-Native 之 Text的使用
    • double


        // 横线风格
        textDecorationStyle:'double'
    
    效果:
    React-Native 之 Text的使用
    • dotted


        // 横线风格
        textDecorationStyle:'dotted'
    
    效果:
    React-Native 之 Text的使用
    • dashed


        // 横线风格
        textDecorationStyle:'dashed'
    
    效果:
    React-Native 之 Text的使用
  • textDecorationColor:线的颜色

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

    效果:
    React-Native 之 Text的使用

  • 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>
            );
        }
    
    效果:
    React-Native 之 Text的使用
  • testID:用来在端到端测试中标记这个视图

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

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

    效果:
    React-Native 之 Text的使用

  • 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
            }
    
        });
    

    效果:
    React-Native 之 Text的使用

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
            }
    
        });
    
    效果:
    React-Native 之 Text的使用
  • 通过试验我们可以看出,文字控制类的属性也是多继承的,和 CSS 是一样的,而且会取与自己最近的属性归自己所用,也就是说属性可覆盖

很多朋友私信我说更新太慢,在这里说声抱歉,因为接近春节,公司事情比较多,还请朋友们见谅,喜欢我的文章的可以点点关注,有什么不清楚或者建议可以评论或留言,谢谢!