相关文章

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. RocEDU.阅读.写作《霍乱时期的爱情》书摘(三)

    暮年的岁月不是奔涌向前的激流,而是一个无底的地下水池,记忆从这里慢慢流走. 那是对人生,爱情,老年和死亡的思考:这些想法曾无数次像夜间的鸟儿一般扑扇着翅膀掠过她的头顶,可每当她想抓住它们时,它们就惊飞 ...

  2. 20145324 《Java程序设计》第3周学习总结

    20145324 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 1.要产生对象必须先定义类,类是对象的设计图,对象是类的实例,建立实例要用new 2.参数名称与对象数据成员 ...

  3. [BZOJ1912]巡逻

    Description Input 第一行包含两个整数 n, K(1 ≤ K ≤ 2).接下来 n – 1行,每行两个整数 a, b, 表示村庄a与b之间有一条道路(1 ≤ a, b ≤ n). Ou ...

  4. fatal: refusing to merge unrelated histories的解决方案

    最近更新了git版本,发现在github上建立了一个仓库,然后关联本地库的时候pull失败,错误为fatal: refusing to merge unrelated histories,查找后找到了 ...

  5. Sql Server数据库链接字符串参数说明

               DataSource,//要连接到的 SQL Server 实例的名称或网络地址              FailoverPartner,//在主服务器停机时要连接到的伙伴服务 ...

  6. Docker 推送镜像到 阿里Docker镜像

    登录 阿里云Docker镜像 https://cr.console.aliyun.com 创建一个镜像 成功之后点击  “管理” 阿里有详细的 使用说明 PS : 注意的地方是 sudo docker ...

  7. GridControl 史上最全的资料(二)

    GridControl详解(四)分组排序汇总 分组: 按时间分第一组: 按性别分第二组: 显示结果: 高级设置: 将所有组展开代码:gridView1.ExpandAllGroups(); 显示结果: ...

  8. 机器学习笔记—EM 算法

    EM 算法所面对的问题跟之前的不一样,要复杂一些. EM 算法所用的概率模型,既含有观测变量,又含有隐变量.如果概率模型的变量都是观测变量,那么给定数据,可以直接用极大似然估计法,或贝叶斯估计法来估计 ...

  9. [ES6]import 与export的用法 ,export 与export default 的 区别 以及用法

    一.import 与export export(导出):用于对外输出本模块(一个文件可以理解为一个模块)变量的接口: import(导入):用于在一个模块中加载另一个含有export接口的模块. 1. ...

  10. js模糊查询

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...