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'}}>行高50</Text>                <Text style={{lineHeight:50,color:'white',backgroundColor:'blue',textAlign:'auto',marginTop:20}}>                    textAlign auto</Text>                <Text style={{height:50,color:'white',backgroundColor:'blue',textAlign:'center',marginTop:20}}>                    textAlign center</Text>                <Text style={{height:50,color:'white',backgroundColor:'blue',textAlign:'left',marginTop:20}}>                    textAlign left</Text>                <Text style={{height:50,color:'white',backgroundColor:'blue',textAlign:'right',marginTop:20}}>                    textAlign right</Text>                <Text style={{textDecorationLine:'underline',textShadowColor:'red',textShadowOffset:{width: 2, height: 2}}}>textDecorationLine underline</Text>            </View>        );    }    }    var styles = StyleSheet.create({        baseText: {            color: 'red',        },        titleText: {            fontSize: 20,            color: 'red',            fontWeight: 'bold',        },    })

效果图：

github下载地址