从零学React Native之10Text

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

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

Text样式

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

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

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

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,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,StyleSheet,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,} 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,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',//
        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,textStyle: {
        fontSize: 30
    },viewStyle: {
        height: 100,alignItems: 'center',backgroundColor: 'gray',margin: 5
    }
});
...

运行结果:

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

两个平台不同的表现

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

更多精彩请关注微信公众账号likeDev,公众账号名称：爱上Android。