react native Text 使用详解

Text 是显示文本的控件，常用属性如下：

numberOfLines : 最大行数，当超过时截取文本。
onLongPress：长按回调函数
onPress：点击回调函数

Style属性：

color：字体颜色
fontFamily：字体
fontSize：字体大小
fontStyle：字体样式 正常（normal）、斜体（italic）
fontWeight 值(‘normal’, ‘bold’, ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, ‘800’, ‘900’)
指定字体的粗细。大多数字体都支持’normal’和’bold’值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值。
lineHeight：行高
textAlign：文本的对齐方式，值(‘auto’, ‘left’, ‘right’, ‘center’, ‘justify’)，’justify’值仅iOS支持，在Android上会变为left
textDecorationLine： 值(‘none’, ‘underline’, ‘line-through’, ‘underline line-through’)
textShadowColor：阴影颜色
textShadowOffset：阴影位置
textShadowRadius：阴影半径

Text可以嵌套，子Text继承父节点的样式。

demo：

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

    export default class TextDemo extends Component {

    render() {
        return (
            <View style={{flex:1}}>

                <Text
                    numberOfLines={1}>
                    不会超过1行不会超过1行不会超过1行不会超过1行不会超过1行不会超过1行mqd
                Text>

                <Text style={{backgroundColor:'red',height:50}} onLongPress={()=>{
                    ToastAndroid.show('onLongPress',ToastAndroid.SHORT);
                }}
                onPress={()=>{
                    ToastAndroid.show('onPress',ToastAndroid.SHORT);
                }}>
                    长按或者点击
                Text>
                <Text style={{height:50,fontStyle:'italic'}} selectable={false}>长按选中Text>
                <Text style={{lineHeight:50,backgroundColor:'red',textAlign:'auto'}}>行高50Text>
                <Text style={{lineHeight:50,color:'white',backgroundColor:'blue',textAlign:'auto',marginTop:20}}>
                    textAlign autoText>
                <Text style={{height:50,color:'white',backgroundColor:'blue',textAlign:'center',marginTop:20}}>
                    textAlign centerText>
                <Text style={{height:50,color:'white',backgroundColor:'blue',textAlign:'left',marginTop:20}}>
                    textAlign leftText>
                <Text style={{height:50,color:'white',backgroundColor:'blue',textAlign:'right',marginTop:20}}>
                    textAlign rightText>
                <Text style={{textDecorationLine:'underline',textShadowColor:'red',textShadowOffset:{width: 2, height: 2}}}>textDecorationLine underlineText>

            View>
        );
    }
    }

    var styles = StyleSheet.create({
        baseText: {
            color: 'red',
        },
        titleText: {
            fontSize: 20,
            color: 'red',
            fontWeight: 'bold',
        },
    })

效果图：

github下载地址