从零学React Native之10Text

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

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

Text样式

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

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

了解了上面的特性, 后面我们会介绍一些实际中的解决办法。 介绍之前我们先来看看Text常用的样式键。View组件的样式都可以使用，除了这些还有下面常用的

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);

运行结果

在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

likeDev.jpg