React Native组件之Text
React Native组件之Text相当于iOS中的UILabel.
其基本属性如下:
/*** Sample React Native App
* https://github.com/facebook/react-native
* 周少停 Text
* 2016-10-08
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class Project extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.textViewStyle} numberOfLines={6}>
演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字,演示的文字
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
textViewStyle:{
color:'red', //字体颜色
fontSize:23, //字体大小
fontStyle:'normal', //字体风格,枚举值,normal,bold
fontWeight: 'bold', //字体粗细权重,枚举值,normal,bold,100,200,300,400,500,600,700,800,900
textShadowOffset:{width:3, height:4}, //阴影效果
textShadowRadius: 2, //阴影效果圆角
textShadowColor:'yellow',//阴影效果颜色
letterSpacing:3 , //字符间距
lineHeight:80 , //行高
textAlign:'center', //文字对齐方式,枚举值:auto left right center justify
textDecorationLine:'underline', //横线位置,枚举值,none,underline,line-through,underline line-through
textDecorationStyle:'solid', //线的风格,solid double dotted dashed
textDecorationColor:'red', //线的颜色
writingDirection:'ltr' //文本方向.枚举值,auto,ltr,rtl
}
});
AppRegistry.registerComponent('Project', () => Project);
完整源码下载:https://github.com/pheromone/React-Native-1
以上是 React Native组件之Text 的全部内容, 来源链接: utcz.com/z/382473.html