React Native开发之——组件Text

发表于 2018-03-04 分类于开发， F-跨平台， React Native 阅读时长 ≈ 1 分钟

前言

Text组件是React中的一个基本组件，它与Android上的TextView组件相类似，就是用来显示文本的，这个控件除了基本的显示布局之外，可以嵌套使用，设置样式，添加事件处理功能。

基本用法

属性方法

在这里我只是举出一些比较常用的属性方法，只是起到抛砖引玉的作用，如果要了解更多的知识可以查看官方网址。

风格样式——Style标签

Text组件可以使用View组件所有的Style，View组件的所有Style可以查看官方文档

实战

基本属性练习

代码

export default class TextInANest extends Component {constructor(props) 
{
	super(props);
	this.state = 
	{
  		titleText: "Bird's Nest",
  		bodyText: 'This is not really a bird nest.'
	};
}
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>
  		</Text>
		);
}
}

const styles = StyleSheet.create(
{
	baseText: {
	fontFamily: 'Cochin',
},
titleText: 
{
	fontSize: 20,
	fontWeight: 'bold',
},
});

效果

onPress和onLongPress

代码

效果

onLayout

代码

效果图

嵌套练习

代码

export default class BoldAndBeautiful extends Component 
{
	render() 
	{
		return (
  		<Text style={{fontWeight: 'bold'}}>
    		I am bold
    		<Text style={{color: 'red'}}>
      		and red
    		</Text>
  		</Text>
	);
	}
}

效果图

组合练习

代码

<View>
	<MyAppText>
		Text styled with the default font for the entire application
	</MyAppText>
	<MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

效果图

其他

参考： RN_Text

0%