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下载地址