>Text显示文本,支持嵌套,链接,触摸处理
属性:
onPress : 触摸回调事件,
onLayout : 挂在和后布局变化时调用
allowFontScaling : 控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放。
numberOfLines : num当文本过长时裁剪文本,定义不超过行数;
suppressHightLighting:ios 按下时是否高亮显示,true为不现实
特性:
1、Text组件内部不再使用flexbox布局,而采用文本布局;
2、Text组件只能继承父组件为Text的文本样式,不继承组建非Text组建的样式,
所以在react-native中无法像web中定义全站的基本字体样式;
>实例
import React,{Component} from 'React';
import {StyleSheet, Text,View,Alert} from 'react-native';
export default class App extends Component {
constructor(props,context) {
super(props,context);
this.state = {
clicked: false
};
//--es6中不会自动绑定作用域
this.pressHander = this.press.bind(this)
this.layoutHander = this.layout.bind(this)
}
press(ev){
this.setState({
clicked : !this.state.clicked
});
this.layoutHander();
}
layout(ev){
Alert.alert('layout event trigger','知道了')
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text numberOfLines={1} style={styles.instructions} onPress={this.pressHander}>
To get started, <Text style={styles.red}>test</Text> edit index.android.js {this.state.clicked ? 'clicked' : 'none'}
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
red:{
color :'#ff0000'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
fontSize : 16
},
});