React Native 之 Text的使用

Posted 2022-12-02 黑森林工作室

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React Native 之 Text的使用相关的知识，希望对你有一定的参考价值。

前言

学习本系列内容需要具备一定 html 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢
文章第一版出自简书，如果出现图片或页面显示问题，烦请转至简书查看也希望喜欢的朋友可以点赞，谢谢

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

```
效果：
![设置行数](http://upload-images.jianshu.io/upload_images/1923109-3deedebeac82b746.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- fontSize：字体大小

```
    // 字体大小
    fontSize:30

```
效果：
![文字大小](http://upload-images.jianshu.io/upload_images/1923109-bfe2e50134fbfeee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- fontFamily：字体名称

```
    // 字体类型
    fontFamily:'Georgia'

```
效果：
![字体类型](http://upload-images.jianshu.io/upload_images/1923109-d628aa9aaa0b0e5f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- fontStyle（’normal’, ‘italic’）：字体风格

```
    // 字体风格
    fontStyle:'italic'

```
效果：

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

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

```
效果：
![字体粗细](http://upload-images.jianshu.io/upload_images/1923109-aeb336766d1cd345.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 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’）：文本对齐方式

auto

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

效果：

left

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

效果：

right

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

效果：

center

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

效果：

justify

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

效果：

textDecorationLine（’none’, ‘underline’, ‘line-through’）：横线位置
- none：没有横线
- underline：
```
    // 横线
    textDecorationLine:'underline'
```
效果：
- line-through:
```
    // 横线
    textDecorationLine:'line-through'
```
效果：

textDecorationStyle（’solid’, ‘double’, ‘dotted’, ‘dashed’）：线风格

solid

    // 横线风格
    textDecorationStyle:'solid'

效果：

double

    // 横线风格
    textDecorationStyle:'double'

效果：

dotted

    // 横线风格
    textDecorationStyle:'dotted'

效果：

dashed

    // 横线风格
    textDecorationStyle:'dashed'

效果：

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 是一样的,而且会取与自己最近的属性归自己所用，也就是说属性可覆盖

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

以上是关于React Native 之 Text的使用的主要内容，如果未能解决你的问题，请参考以下文章

react-native-easy-app 详解与使用之 View，Text，Image，Fl

React-Native组件之Text内文字垂直居中方案

react native 怎么实现一个时间下拉框

React Native 之 TextInput（多个语法知识）

React Native之登录界面的布局

React Native 开发之 (04) 例子讲解