关闭

React Native组件(三)Text组件解析

标签: Text组件react-native
2564人阅读 评论(1) 收藏 举报
分类:

相关文章
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。效果如下所示。

QQ图片20170716152219.jpg

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相关原创技术干货。
扫一扫下方二维码或者长按识别二维码,即可关注。

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

React Native控件之Text组件介绍

React Native控件之Text组件介绍(一)前言前面在讲解View视图的时候,我们使用过Text组件,这篇文章详细的来介绍一下Text组件。(二)基本用法Text组件是React中的一个基本组...
  • u014484863
  • u014484863
  • 2016-06-17 13:49
  • 4260

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

React Native 项目常用第三方组件汇总: react-native-uploader //文件上传 https://github.com/aroth/react-native-upl...
  • sinat_17775997
  • sinat_17775997
  • 2017-02-08 22:10
  • 1602

React Native 学习之Text组件

/** * @Author: fantasy * @Date:   2016-06-15T15:52:24+08:00 * @Last modified by:   fantasy * @Last m...
  • WKFfantasy
  • WKFfantasy
  • 2016-06-15 17:54
  • 716

(二)React Native中View和Text组件的使用

前言前段时间实在太忙,由于刚进公司,第一个项目要用混合开发,这种开发模式自己也没用过,期间遇见过与h5的各种奇葩问题,并且Android这端都是由自己负责,经过两个月的努力,公司项目终于上线。加之后面...
  • qq_18242391
  • qq_18242391
  • 2017-05-13 00:01
  • 423

《React-Native系列》RN组件之Text和TextInput以及注意要点

今天把写的RN程序从iOS上迁移到Android上,发现了一些问题,主要涉及到Text和TextInput这两个组件,所以用一节来专门记录下来。 Text组件 我们先来看官网给的例子: [ja...
  • sinat_17775997
  • sinat_17775997
  • 2016-12-18 16:44
  • 1350

一起来点React Native——常用组件之Text

React Native常用组件之Text 一、什么是Text组件? 一个用于显示文本的React组件,和Android中的TextView组件或者OC中的Label组件相类似,专门用...
  • u011733020
  • u011733020
  • 2017-08-08 00:07
  • 134

React Native控件之Text组件介绍

基本用法Text组件是React中的一个基本组件,这个和iOS上的UILabel与Android上的TextView组件相类似,就是用来显示文本的,这个空间除了基本的显示布局之外,可以嵌套使用,设置样...
  • u014732103
  • u014732103
  • 2016-10-31 11:00
  • 160

《React-Native系列》10、 RN组件之Text和TextInput以及注意要点

今天把写的RN程序从iOS上迁移到Android上,发现了一些问题,主要涉及到Text和TextInput这两个组件,所以用一节来专门记录下来。 Text组件 我们先来看官网给的例子: renderT...
  • hsbirenjie
  • hsbirenjie
  • 2016-08-11 22:51
  • 7663

React-native学习过程 九 Text组件综合应用

我这次使用Text组件做一个新闻页面 它分为三个部分头部标题,新闻列表,重要新闻, 而且我们队重要新闻部分添加点击回馈,就是调用alert显示新闻内容 这次写代码也是分三个模块export de...
  • z979451341
  • z979451341
  • 2017-04-07 16:18
  • 245

【React Native开发】React Native控件之Text组件讲解(9)

(一)前言          今天我们一起来看一下Text控件的具体介绍和使用方法,具体环境搭建以及相关配置的请查看之前的相关文章。       &#...
  • jiangqq781931404
  • jiangqq781931404
  • 2016-01-20 19:34
  • 22117
    我的新书
    个人资料
    • 访问:1864002次
    • 积分:16333
    • 等级:
    • 排名:第734名
    • 原创:190篇
    • 转载:52篇
    • 译文:0篇
    • 评论:1007条
    我的微博
    最新评论
    公众号
    百度统计