企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
>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 }, });