React-Native 之 Text的使用

时间 2019-11-11

标签 react native text 使用栏目 React 繁體版

原文原文链接

前言

学习本系列内容须要具有必定 HTML 开发基础，没有基础的朋友能够先转至 HTML快速入门(一) 学习函数
本人接触 React Native 时间并非特别长，因此对其中的内容和性质了解可能会有所误差，在学习中若是有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢布局
文章初版出自简书，若是出现图片或页面显示问题，烦请转至简书查看也但愿喜欢的朋友能够点赞，谢谢学习

Text 组件介绍

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

Text 组件经常使用的属性和方法

color：字体颜色测试
```
// 字体颜色
    color:'blue'
```
效果：字体

numberOfLines：设置 Text 显示文本的行数，若是显示的内容超过行数，默认其他的文本信息再也不显示flex

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

效果：

fontSize：字体大小3d
```
// 字体大小
    fontSize:30
```
效果：

fontFamily：字体名称rest

// 字体类型
    fontFamily:'Georgia'

效果：

fontStyle（'normal', 'italic'）：字体风格code
```
// 字体风格
    fontStyle:'italic'
```
效果：
fontWeight（'normal', 'bold', '100 ~ 900'）：指定字体的粗细。大多数字体都支持'normal'和'bold'值。并不是全部字体都支持全部的数字值。若是某个值不支持，则会自动选择最接近的值orm
```
// 字体粗细
    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'）：文本对齐方式

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 组件的嵌套使用