在 React Native 用于显示文本的组件就是 Text，和iOS中的 UIlabel，Android中的 TextView类似，专门用来显示基本的文本信息，处理基本的显示布局外，还可以进行嵌套显示，设置样式，已经事件处理（如：点击事件）
Text 组件常用的属性和方法
color：字体颜色
// 字体颜色
color:'blue'
效果：
image.png
numberOfLines：设置 Text 显示文本的行数，如果显示的内容超过行数，默认其余的文本信息不再显示
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle} numberOfLines={3}>雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest</Text>
</View>
);
}
效果：
image.png
fontSize：字体大小
// 字体大小
fontSize:30
效果：
image.png
fontFamily：字体名称
// 字体类型
fontFamily:'Georgia'
效果：
image.png
fontStyle（'normal', 'italic'）：字体风格
// 字体风格
fontStyle:'italic'
效果：
image.png
fontWeight（'normal', 'bold', '100 ~ 900'）：指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值
// 字体粗细
fontWeight:('bold', '700')
效果：
image.png
textShadowOffset（width: number, height: number）：设置阴影效果
textShadowColor：阴影效果颜色
// 阴影
textShadowOffset:{width:3, height:5},
// 阴影颜色
textShadowColor:'black'
效果：
image.png
textShadowRadius：阴影效果圆角（值越大阴影越模糊）
// 阴影圆角
textShadowRadius:3
效果：
image.png
letterSpacing：字符间距
// 字符间距
letterSpacing:5
效果：
image.png
lineHeight：行高
// 行高
lineHeight:25
效果：
image.png
textAlign（'auto', 'left', 'right', 'center', 'justify'）：文本对齐方式
auto
// 文本对齐方式
textAlign:'auto'
效果：
image.png
left
// 文本对齐方式
textAlign:'left'
效果：
image.png
right
// 文本对齐方式
textAlign:'right'
效果：
image.png
center
// 文本对齐方式
textAlign:'center'
效果：
image.png
justify
// 文本对齐方式
textAlign:'justify'
效果：
image.png
textDecorationLine（'none', 'underline', 'line-through'）：横线位置
none：没有横线
underline：
// 横线
textDecorationLine:'underline'
效果：
image.png
line-through:
// 横线
textDecorationLine:'line-through'
效果：
image.png
textDecorationStyle（'solid', 'double', 'dotted', 'dashed'）：线风格
solid
// 横线风格
textDecorationStyle:'solid'
效果：
image.png
double
// 横线风格
textDecorationStyle:'double'
效果：
image.png
dotted
// 横线风格
textDecorationStyle:'dotted'
效果：
image.png
dashed
// 横线风格
textDecorationStyle:'dashed'
效果：
image.png
textDecorationColor：线的颜色
// 线的颜色
textDecorationColor:'black',
效果：
image.png
allowFontScaling：控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放
adjustsFontSizeToFit：指定字体是否随着给定样式的限制而自动缩放
minimumFontScale：当adjustsFontSizeToFit开启时，指定最小的缩放比（即不能低于这个值）。可设定的值为0.01 - 1.0
suppressHighlighting：当为true时，如果文本被按下，则没有任何视觉效果。默认情况下，文本被按下时会有一个灰色的、椭圆形的高光
selectable：决定用户是否可以长按选择文本，以便复制和粘贴
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}
selectable={true}
>
雨泽Forest
</Text>
</View>
);
}
效果：
image.png
testID：用来在端到端测试中标记这个视图
onPress：当文本发生点击的时候调用该方法
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}
onPress={()=>{alert('点击')}}
>
雨泽Forest
</Text>
</View>
);
}
效果：
image.png
onLongPress：当文本被长按以后调用此回调函数（参考onPress）
onLayout：当挂载或者布局变化以后调用（参数为：{nativeEvent: {layout: {x, y, width, height}}}）(参考onPress)
二、Text 使用
视图部分
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle}>雨泽Forest</Text>
</View>
);
}
样式部分
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
},
textStyle: {
// 背景色
backgroundColor:'yellow',
// 字体大小
fontSize:30,
// 下划横线
textDecorationLine:'underline'
}
});
效果：
Text 组件的嵌套使用
视图部分
var test = React.createClass({
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle} numberOfLines={3}>
雨泽
<Text style={{color:'orange'}}>
Forest
</Text>
</Text>
</View>
);
}
});
样式部分
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
},
textStyle: {
// 字体颜色
color:'blue',
// 字体大小
fontSize:30
}
});
效果：
image.png
Text 组件中样式的继承
在 React Native 中是没有样式继承这种说法的，但对于 Text 元素里边的 Text 元素，其实是可以继承的，至于是单继承还是多继承，我们可以来试验一下
视图部分
var test = React.createClass({
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyle} numberOfLines={3}>
<Text>
<Text>雨泽Forest</Text>
</Text>
</Text>
</View>
);
}
});
样式部分
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
},
textStyle: {
// 字体颜色
color:'blue',
// 字体大小
fontSize:30
}
});
效果：
image.png
样式继承关系
通过试验我们可以看出，文字控制类的属性也是多继承的，和 CSS 是一样的,而且会取与自己最近的属性归自己所用，也就是说属性可覆盖
网友评论