开发者社区> 于连林520wcf> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

从零学React Native之10Text

简介: 在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中。虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么简单。 任何一个组件,都有样式和属性,样式一般约束控件的样式和位置,定义在style属性中。属性就是直接声明在控件上。 Text样式 Text组件支持View的所有样式
+关注继续查看

在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中。虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么简单。

任何一个组件,都有样式和属性,样式一般约束控件的样式和位置,定义在style属性中。属性就是直接声明在控件上。

Text样式

Text组件支持View的所有样式键。但是需要注意的是,Text内部的元素不再使用flexBox布局,而是采用文本布局。 这意味着Text组件内部的元素不再是一个个的矩形,组件内部元素排列出组件末端时会自动另起一行。
所以开发者可以不用设定Text控件的高度,一般情况也没有必要设定,Text组件的高度将由Text组件的宽度,需要显示的字符串长度,字体大小共同来决定。

Text组件中显示的字符串只有一行,并且我们设置了Text组件的高度,这个高度比字体大很多,字符串会贴着组件上边显示, 因为不支持flexBox布局, 无法让它调整到垂直方向居中显示. 我们只能通过在字符串前面 加{\r\n} 让字符串前加空行的形式凑到居中显示.

了解了上面的特性, 后面我们会介绍一些实际中的解决办法。 介绍之前我们先来看看Text常用的样式键.

样式键名 描述
color 字体颜色, 和其它位置的颜色类型一样
fontFamily 字体名称
fontSize 字体大小
fontStyle 字体风格, 可选值 ‘normal’,’italic’ ,分别代表正常和斜体。
fontWeight 字体粗细权重(“normal”, ‘bold’, ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, ‘800’, ‘900’) normal和bold就是平时说的正常字体与粗体,后面的9个数字从最细(100) 到最粗(900) 每一个数字定义的都要比上一个等级粗一些.
textShadowOffset 设置阴影效果{width: number, height: number}
textShadowRadius 阴影效果圆角
textShadowColor 阴影效果的颜色
letterSpacing 字符间距
lineHeight 行高
textAlign 文本对其方式(“auto”, ‘left’, ‘right’, ‘center’, ‘justify’) , 默认是auto。justify只有ios支持。
textDecorationLine 横线位置 (“none”, ‘underline’, ‘line-through’, ‘underline line-through’)
textDecorationStyle 线的风格(“solid”, ‘double’, ‘dotted’, ‘dashed’)
textDecorationColor 线的颜色
writingDirection 文本方向(“auto”, ‘ltr’, ‘rtl’) 一般不需要更改

Text属性

  1. numberOfLines , 数值类型表示Text字符串可以显示多少行
  2. onLayout 与之前的一样,当布局改变的时候调用, 对应一个函数,参数为{nativeEvent: {layout: {x, y, width, height}}}
  3. onPress, onLongPress 按下事件和长按事件 , 因为没有触摸反馈效果, 不推荐使用
  4. ellipsizeMode , 最新版本推出的属性, 显示不完全省略的位置, 一般配合numberOfLines 使用。 可选值'head', 'middle', 'tail', 'clip', clip 只能在ios中使用, tail是默认值, 省略尾巴 显示方式如:”abcd…”

Text组件嵌套

在iOS或Android当中,显示一个格式化文本的方法就是使用NSAttributedString(IOS)或者SpannableString(Android) ,并且使用范围标注来指定一些格式。这种用法非常繁琐。在React Native中,采用和Web一致的设计,这样你可以把相同格式的文本嵌套包裹起来:

import React, { Component } from 'react';
import {
    AppRegistry,
    Text,
} from 'react-native';
class AwesomeProject extends Component {
    render() {
        return (
            <Text style={{fontWeight: 'bold'}}>
                I am bold
                <Text style={{color: 'red'}}>
                    and red
                </Text>
            </Text>
        );
    }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

运行结果:
这里写图片描述
子Text组件将继承它父Text组件的样式。 当使用嵌套的Text组件时, 子Text组件不能覆盖从父Text组件继承而来的样式 ,只能增加父Text组件没有指定的样式.

在IOS中, 你还可以在Text组件中嵌套View组件,

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class BlueIsCool extends Component {
  render() {
    return (
      <Text>
        There is a blue square
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        in between my text.
      </Text>
    );
  }
}

AppRegistry.registerComponent('BlueIsCool', () => BlueIsCool);

运行结果:

运行结果
Android端虽然暂时不能插入View组件, 但是Android和IOS都可以在Text组件中更方便的插入图像。

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Image
} from 'react-native';
class AwesomeProject extends Component {
    render() {
        return (
            <Text style={{fontWeight: 'bold'}}>
                I am bold
                <Text style={{color: 'red'}}>
                    <Image source={require('./image/big_star.png') } style={styles.imageInTextStyle}/>and red
                </Text>
            </Text>
        );
    }
}
const styles = StyleSheet.create({
    imageInTextStyle:{
        width:30,
        height:30,
        resizeMode:'cover'
    }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

阴影效果

React Native 0.18版本开始, Text组件支持阴影效果.需要三个样式键: textShadowOffset,textShadowRadius,textShadowColor。参考下面代码:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
} from 'react-native';
//导入自定义组件
class AwesomeProject extends Component {
    render() {
        return (
            <Text style={styles.baseStyle}>
                I am bold
                <Text style={{color: 'red'}}>
                    and red
                </Text>
            </Text>
        );
    }
}
const styles = StyleSheet.create({
    baseStyle: {
        fontSize: 20,
        textAlign: 'center',
        color:'black',
        textShadowColor:'grey',  // 阴影颜色
        textShadowOffset:{width:5,height:5}, //阴影偏移量
        textShadowRadius:2,  // 阴影半径
        fontWeight:'bold'
    }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

效果:

这里写图片描述

文本垂直居中

上面我们介绍了, Text内部不使用FlexBox布局,我们只能通过其它方式让Text垂直居中.
先来看看下面的例子,

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';
class AwesomeProject extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle}>
                    让我垂直居中
                </Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    textStyle: {
        height: 100,
        width: 200,
        fontSize: 30,
        backgroundColor: 'grey',
        textAlign: 'center', //
        justifyContent: 'center',// 主轴(该位置为垂直方向)居中, 但是不生效
        margin: 5
    }
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

运行结果:

这里写图片描述

可以看到上面文字并没有垂直居中. 上面并不是正确的方式, 正确的做法就是让View组件包裹Text组件, 除了FontSize之外的样式全部定义在View组件中, 来看代码:

...
class AwesomeProject extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.viewStyle}>
                    <Text style={styles.textStyle}>
                        让我垂直居中
                    </Text>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    textStyle: {
        fontSize: 30
    },
    viewStyle: {
        height: 100,
        width: 200,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'gray',
        margin: 5
    }
});
...

运行结果:


这样我们就做到了垂直居中了

两个平台不同的表现

Android和IOS 两个平台的Text表现略有区别, 如果字体需要加边框, Android端不生效, 需要在Android端的用View包裹Text, 让View实现边框。
Text组件在Android端高度大约为FontSize的1.35倍, IOS端为1.2倍

更多精彩请关注微信公众账号likeDev,公众账号名称:爱上Android。
这里写图片描述

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
APICloud与flutter,react native比较
APICloud做出来的应用的性能和体验可以达到原生的效果,丰富的模块Store , 原生模块几乎涵盖所有需求
0 0
React Native 0.64版本发布,iOS开启支持Hermes引擎
React Native 0.64版本发布,iOS开启支持Hermes引擎
0 0
在React Native中集成热更新
在React Native中集成热更新
0 0
电影天堂React Native 客户端V2.0发布
电影天堂React Native 客户端V2.0发布
0 0
电影天堂React Native 客户端
电影天堂React Native 客户端
0 0
React Native 打包报错 (一)
React Native Android 项目使用 ./gradlew assembleRelease 命令打包报错。
0 0
React Native 运行报错 error in opening zip file
基于 React Native 中文网教程 编译并运行 React Native 应用,在项目 (AwesomeProject) 根目录下运行命令 yarn rect-native run-android 或 yarn android 出现如下错误。
0 0
+关注
于连林520wcf
【爱上Android】作者,从事Android开发和教育多年,担当多个重点项目的负责人,项目涉及办公类、O2O、医疗等多元化类型,曾在培训机构从事Android教育多年,有上千课时讲课经验。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
React Native项目实战优化之路
立即下载
利用编译将 Vue 组件转成 React 组件
立即下载
搭建React Native生态
立即下载