React Native从零开始（五）Text
一个用于显示文本的React组件，并且它也支持嵌套、样式，以及触摸处理。跟Android中的TextView差不多
这个例子跟官网的差不多，实现了点击事件和state属性和Text嵌套，整体的代码如下
这个例子跟官网的差不多，实现了点击事件和state属性和Text嵌套，整体的代码如下
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
function onPressTitle() {
alert("点击事件");
}
export default class TextDemo extends Component {
constructor(props){
super(props);
this.state = {
titleText:"这个是标题",
bodyText:"这个是内容部分"
};
}
render() {
return (
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={this.onPressTitle}>
{this.state.titleText + '\n\n'}
</Text>
<Text numberOfLines={5}>
{this.state.bodyText}
<Text style={{color:"cyan"}}>
内容中嵌套的Text字体颜色更改,我是SuperBigLw
<Text style={[{fontWeight:"bold"},{fontSize:30}]}>你好</Text>
呵呵~
</Text>
</Text>
</Text>
);
}
}
const styles = StyleSheet.create({
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});
AppRegistry.registerComponent('TextDemo', () => TextDemo);可以看出我们在Text中又嵌套了Text，子Text继承了父Text的属性，如果需要不同的话，那么需要重新设置。
<Text style={{color:"cyan"}}>
内容中嵌套的Text字体颜色更改,我是SuperBigLw
<Text style={[{fontWeight:"bold"},{fontSize:30}]}>你好</Text>
呵呵~
</Text>其他的属性看官网就好了
作者：SuperBigLw 发表于2017/1/13 15:33:32 原文链接
阅读：0 评论：0 查看评论