Text一个用于显示文本的 React组件,并且它也支持嵌套、样式,以及触摸处理。
1,简单的样例
(1)效果图
下面给 Text设置了字体大小、颜色、阴影,并加粗。
(2)样例代码
import React, { Component } from eact;
import {
AppRegistry,
StyleSheet,
Text,
View,
} from eact-native;
class Main extends Component {
render() {
return (
编程社区
);
}
}
const styles = StyleSheet.create({
flex:{
flex:1
},
container: {
marginTop:35,
marginLeft:5,
marginRight:5,
},
font:{
color:#FF7700,
fontSize:40,
fontWeight:old,
textShadowColor:#C0C0C0,
textShadowRadius:2,
textShadowOffset:{width:2,height:2},
},
});
AppRegistry.registerComponent(HelloWorld, () => Main);
2,Text支持的样式
Text组件除了可以使用 View组件所有的 Style,还支持如下样式:
名称
作用
值
适用设备
color
字体颜色
多种形式
通用
fontFamily
字体名称
fontFamily 用来指定 Text 组件以何种字体族显示。它的取值有:
serif:该字体族在字的笔画开始及结束的地方有额外的装饰,而笔画的粗细会因横直地不同而有所不同。
sans-serif:该字体族没有额外的装饰,笔画粗细大致差不多。
monospace:由于打字机的出现,又独立出了这种等宽字体种类。
以及延伸出来的:sans-serif-light、sans-serif-thin、sans-serif-condensed、sans-serif-medium
通用
fontSize
字体大小
数字
通用
fontStyle
字体风格
normal、italic
通用
fontWeight
字体粗细权重
normal、bold、100、200、300、400、500、600、700、800、900
normal和bold适用于大多数字体,分别表示正常字体和粗体。
其后的9个数字序列代表从最细(100)到最粗(900)的字体粗细程度,每一个数字定义的粗细都要比上一个等级稍微粗一些。但不是所有的字体的值都能用数字值,在这种情况下,最接近的值被选择。
通用
lineHeight
行高
数字
通用
textAlign
文本对齐方法
auto、left、right、center、justify。
auto表示根据组件显示的字符语言来决定字符串如何排列,比如英语将自动从左向右