相关文章

React Native探索系列

React Native组件系列

前言

此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。

1 概述

Text组件对应于Android平台的TextView,用来显示文本。无论做什么应用几乎都要使用它,可以说是应用最频繁的组件之一。Text组件的内部使用的并不是flexbox布局,而是文本布局,因此想要使用flexbox设置文字居中是不可能的,解决方案就是在Text组件的外层套一层View,设置View的flexbox,具体的参考2.1节的例子代码。

2 Style属性

Text组件支持View组件的所有的Style属性,不了解View组件的Style属性可以查看React Native组件(二)View组件解析这篇文章。

2.1 字体相关 Style属性

Style属性名 取值 说明
fontFamily enum(‘sans-serif’, ‘serif’,’monospace’,’sans-serif-light’,’sans-serif-thin’,’sans-serif-condensed’,’sans-serif-medium’) 英文字符串的样式
fontSize number 字体大小
fontStyle enum(‘normal’, ‘italic’) 字体风格是普通还是斜体
fontWeight enum(‘normal’, ‘bold’, ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, ‘800’, ‘900’) 字体粗细程度

举个简单的例子,如下所示。

index.android.js

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, Text} from 'react-native';
class TextApp extends Component {
    render() {
        return (
            <View style={styles.viewStyle}>
                <Text style={styles.textStyle1}>itachi</Text>
                <Text style={styles.textStyle2}>itachi</Text>
                <Text style={styles.textStyle3}>itachi</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    textStyle1: {
        fontFamily: 'monospace',
        fontSize: 20,
        fontStyle: 'normal',
        fontWeight: '900'
    },
    textStyle2: {
        fontFamily: 'serif',
        fontSize: 20,
        fontStyle: 'normal',
        fontWeight: '900'
    },
    textStyle3: {
        fontFamily: 'serif',
        fontSize: 20,
        fontStyle: 'italic',
        fontWeight: '300'
    }
});
AppRegistry.registerComponent('ViewSample', () => TextApp);

运行程序效果如下图所示。

第一行和第二行对比,发现monospace(等宽)字体要比serif字体要宽大些,笔画更细一些。第二行和第三行做对比,可以明显看出第三行是斜体字并且字体更细一些。

2.2 阴影相关 Style属性

Style属性名 取值 说明
textShadowColor color 阴影颜色
textShadowOffset {width: number, height: number} 阴影效果
textShadowRadius number 阴影圆角

改写2.1小节的例子中styles的代码,如下所示。

const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    textStyle1: {
        fontSize: 20,
        textShadowColor: 'blue',
        textShadowOffset: {width: 5, height: 5},
        textShadowRadius: 1
    },
    textStyle2: {
        fontSize: 20,
        textShadowColor: 'blue',
        textShadowOffset: {width: 5, height: 5},
        textShadowRadius: 5
    },
    textStyle3: {
        fontSize: 20,
        textShadowColor: 'blue',
        textShadowOffset: {width: 2, height: 2},
        textShadowRadius: 5
    }
});

运行效果如下图所示。

第一行和第二行对比,可以看到textShadowRadius的值越大,阴影就会越不精细。第二行和第三行对比,textShadowOffset的width和height值越大,阴影的偏移量就会越大。

2.3 平台独有的Style属性

Style属性名 取值 说明 平台
includeFontPadding bool 默认值是true,显示文本时额外的字体填充 Android
textAlignVertical enum(‘auto’, ‘top’, ‘bottom’, ‘center’) 垂直方向上文本对齐的方式 Android
letterSpacing number 每个字符之间的空间 iOS
textDecorationColor color 文本装饰线条的颜色 iOS
textDecorationStyle enum(‘solid’, ‘double’, ‘dotted’, ‘dashed’) 文本装饰线条的风格 iOS
writingDirection enum(‘auto’, ‘ltr’, ‘rtl’) 文本的书写方向 iOS

2.4 其他Style属性

Style属性名 取值 说明
textAlign enum(‘auto’, ‘left’, ‘right’, ‘center’, ‘justify’) 文本对齐方式,justify只在iOS平台有效,在Android平台等价于Left
textDecorationLine enum(‘none’, ‘underline’, ‘line-through’, ‘underline line-through’) 横线相关设置
lineHeight number 行的高度

我们设置不同的textDecorationLine的值,改写2.1小节的例子中styles的代码:

const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    textStyle1: {
        fontSize: 20,
        textDecorationLine: 'underline',
    },
    textStyle2: {
        fontSize: 20,
        textDecorationLine: 'line-through',
    },
    textStyle3: {
        fontSize: 20,
        textDecorationLine: 'underline line-through',
    }
});

运行效果为:

3 属性

3.1 ellipsizeMode

ellipsizeMode的取值为enum(‘head’, ‘middle’, ‘tail’, ‘clip’) ,用来设定当文本显示不下全部内容时,文本应该如何被截断,需要注意的是,它必须和numberOfLines(文本显示的行数)搭配使用,才会发挥作用。

  • head:从文本的开头进行截断,并在文本的开头添加省略号,例如:…xyz。
  • middle :从文本的中间进行截断,并在文本的中间添加省略号,例如:ab…yz。
  • tail:从文本的末尾进行截断,并在文本的末尾添加省略号,例如:abcd…。
  • clip :文本的末尾显示不下的内容会被截断,并且不添加省略号,clip只适用于iOS平台。

index.android.js

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, Text} from 'react-native';
class TextApp extends Component {
    render() {
        let str = '宇智波鼬的终极忍术是伊邪那美。';
        return (
            <View style={styles.viewStyle}>
                <Text style={styles.textStyle} ellipsizeMode='head' numberOfLines={1}>{str}</Text>
                <Text style={styles.textStyle} ellipsizeMode='middle' numberOfLines={1}>{str}</Text>
                <Text style={styles.textStyle} ellipsizeMode='tail' numberOfLines={1}>{str}</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
    textStyle: {
        fontSize: 20,
        width: 150,
        padding: 1
    }
});
AppRegistry.registerComponent('ViewSample', () => TextApp);

分别设置ellipsizeMode的值为head、middle和tail。效果如下所示。

3.2 onPress/onLongPress

当文本被点击以后会调用onPress回调函数,类似的还有onLongPress,当文本被长按时会调用onLongPress回调函数。

index.android.js

import React, {Component} from 'react';
import {AppRegistry, StyleSheet, View, Text, Alert} from 'react-native';
class TextApp extends Component {
    render() {
        return (
            <View style={styles.viewStyle}>
                <Text onPress={onTextPress}>点击文本</Text>
                <Text onLongPress={onLongTextPress}>长按文本</Text>
            </View>
        );
    }
}
const onTextPress = () => {
    Alert.alert('点击文本弹出');
};
const onLongTextPress = () => {
    Alert.alert('长按文本弹出');
};
const styles = StyleSheet.create({
    viewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    },
});
AppRegistry.registerComponent('ViewSample', () => TextApp);

当我们点击第一个Text时,会弹出标题为“点击文本弹出”的Alert。长按第二个Text时,会弹出标题为“长按文本弹出”的Alert。

3.3 其他属性

属性名 取值 说明 平台
numberOfLines number 文本显示的行数
selectable bool 默认值为false,为true时可以被选择并复制到系统剪切板中
selectionColor color 文本被选择时的高亮颜色 Android
adjustsFontSizeToFit bool 默认值为false,为true时字体会自动缩小,以适应给定的样式约束 iOS
minimumFontScale number adjustsFontSizeToFit属性为true时,设置字体的最小缩放比例,取值范围为0.01~1.0 iOS

还有一些属性这里没有提到,比如方便失能人士使用手机而提供的相关属性等等,具体的属性请查看官方文档

参考资料

官方文档

《React Native跨平台移动应用开发》第二版


欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。

扫一扫下方二维码或者长按识别二维码,即可关注。

React Native组件(三)Text组件解析的更多相关文章

  1. React Native知识5-Touchable类组件

    React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...

  2. React Native 项目常用第三方组件汇总

    React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...

  3. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  4. flutter Container组件和Text组件

    在开始之前,我们先写一个最简单的入口文件:     后面,都是在这个结构的基础上面完成的. 由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式. ...

  5. React Native 之 定义的组件 (跨文件使用)

    哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间  哈哈  下面开始吧!!!! 我们所要创建的是一个自定义的Button,先创建一个js文件起名为MyButton, ...

  6. React Native的SliderIOS滑块组件

    import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, SliderIOS, } fro ...

  7. React Native 系列(三) -- 项目结构介绍

    前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...

  8. 关于Unity中UI中的Mask组件、Text组件和布局

    一.Mask组件 遮罩,Rect Mask矩形Mask(Rect Mask2D组件),图片Mask(Mask组件)(图片Mask的透明度不为0的部分显示子图片,为0的部分不显示子图片) Rect Ma ...

  9. React Native 系列(三)

    前言 本系列是基于React Native版本号0.44.3写的,相信大家看了本系列前面两篇文章之后,对于React Native的代码应该能看懂一点点了吧.本篇文章将带着大家来认识一下React N ...

  10. Flutter Container 组件、Text 组件详解

    Text 组件 textAlign     文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐) textDirection   文本方向(ltr 从左至右 ...

随机推荐

  1. C/C++中RAND_MAX的用法

    RAND_MAX是C中stdlib.h中宏定义的一个字符常量: #define RAND_MAX Ox7FFF 其值最小为32767,最大为2147483647 通常在产生随机小数时可以使用RAND_ ...

  2. SublimeText3 编辑器使用小结

    1. 快捷键: Command + shift + D : 复制当前行 Command + shift + K : 删除当前行 Command + J : 合并一行 Command + Enter : ...

  3. mybatis映射文件_select_resultMap

    实体类: Employee.java类: package com.hand.mybatis.bean; public class Employee {        private Integer e ...

  4. c#的逆向工程-IL指令集

    一些 IL 语言解释:  跳转指令集合 Public field Static     Beq     如果两个值相等,则将控制转移到目标指令. Public field Static     Beq ...

  5. 整数分解为若干项之和 - PAT

    深度搜索,一开始没有想到,说明基本功还是不够啊,加油 //======================================================================= ...

  6. 解题报告:hdu 1276 士兵队列训练问题 - 简单题

    Problem Description 某部队进行新兵队列训练,将新兵从一开始按顺序依次编号,并排成一行横队,训练的规则如下:从头开始一至二报数,凡报到二的出列,剩下的向小序号方向靠拢,再从头开始进行 ...

  7. 编译libmemcached

    php的扩展memcache,不支持cas,所以我们要装memcached扩展,memcached扩展是基于libmemcached,所以要先安装libmemcached 一.下载软件 1.libme ...

  8. Python类变量,实例变量,类方法,实例方法,静态方法的分析

    Python作为动态语言,跟静态语言如c/c++有很大区别,其中的一个重要的特性就是Python的变量无需声明直接可用.同样,类的成员变量无需声明,直接可用.目的是为了动态语言跟灵活,在思路想到的时候 ...

  9. nRF5芯片外设GPIO和GPIOTE介绍

    nRF51/nRF52同时包含GPIO和GPIOTE两种外设,经常有人将两者搞混,今天我们就来介绍一下这2种外设有什么不同,及使用注意事项. GPIO和GPIOTE都属于芯片外设,但两者功能完全不一样 ...

  10. 我的Android学习路线(一)

    最近实在是闲的无聊,本着不能让自己的时间白白流失的目的,我就决定完成一下之前的诺言:把 Android 开发学了.正好手头有一本<Android 4编程入门经典>,于是便用两天时间把视图部 ...