React Native探索(三)组件的Props(属性)和State(状态)
来源:互联网 发布:一个字头的诞生知乎 编辑:程序博客网 时间:2024/05/19 14:02
相关文章
React Native探索系列
前言
在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。
1.Props(属性)
组件创建时会设置一些参数来定制这个组件,这些参数就是属性,属性一旦设定,在组件的生命周期中就不会改变。下面拿Image的source属性和Text的onPress属性作为举例。
Image的source属性
import React, {Component} from 'react';import {AppRegistry, Image} from 'react-native';class ImageSourceApp extends Component { render() { let pic = { uri: 'http://olwwjaqhc.bkt.clouddn.com/gongzhong.jpg' }; return ( <Image source={pic} style={{width: 200, height: 200}}/>//1 ); }}AppRegistry.registerComponent('firstProject', () => ImageSourceApp);
在注释1处用Image的source属性来指定要显示的图片的地址,{}中可以放一个js变量或表达式,需要执行后取值,这里将图片的地址pic放到{}中。紧接着用style属性来设置图片大小,关于style属性,后面会介绍它。运行效果如下图所示。
Text的onPress属性
接着拿我们熟悉的Text来做举例,如下所示。
import React, {Component} from 'react';import {AppRegistry, Text, Alert} from 'react-native';class TextPressApp extends Component { render() { return ( <Text onPress={onTextPress}>点击文本</Text>//1 ); }}const onTextPress = () => { Alert.alert('弹出框');};AppRegistry.registerComponent('firstProject', () => TextPressApp);
注释1处的onPress就是Text的属性,除了onPress,Text还有很多其他的属性,比如numberOfLines、onLayout和style等等。{}放入了onTextPress函数,它是一个箭头函数,作用就是return一个Alert,它等价于如下代码:
function onTextPress() { return Alert.alert('弹出框');};
好了我们运行程序,当我们点击Text组件时会弹出Alert,如下图所示。
style属性
在React Native中所有的核心组件都接受名为style的属性,用来定于组件的样式,我们将上面的Text示例代码中加入style属性,如下所示。
...class TextPressApp extends Component { render() { return ( <Text style={{color: 'blue'}} onPress={onTextPress}>点击文本</Text> ); }}...
再运行程序,就会发现”点击文本”变为蓝色了。在实际开发中,style属性会变得越来越复杂,因此我们可以使用StyleSheet.create来集中定义组件的样式。
import React, {Component} from 'react';import {AppRegistry, Text, Alert, StyleSheet, View} from 'react-native';class TextPressApp extends Component { render() { return ( <View>//2 <Text style={styles.largeblue} onPress={onTextPress}>点击文本</Text> <Text style={styles.green}> 第二行</Text> </View> ); }}const styles = StyleSheet.create({//1 largeblue: { color: 'blue', fontSize: 28, fontWeight: 'bold', }, green: { color: 'green', fontSize: 18, },});const onTextPress = () => { Alert.alert('弹出框');};AppRegistry.registerComponent('firstProject', () => TextPressApp);
在注释1处通过StyleSheet.create创建了一个样式表,我们在Text中使用样式表就可以了。在注释2处用到了view组件,它是一个基础组件支持Flexbox布局、样式和一些触摸处理等,可以放到其他视图里也可以包含子视图。View组件在Android、iOS和Web中,分别对应View、UIView和<div>
。
我们运行程序,效果如下图所示。
2.State(状态)
组件的属性设置完毕后,在组件的生命周期中就不会改变,如果想要改变属性,我们可以使用State,例子如下。
import React, {Component} from 'react';import {AppRegistry, Text, View} from 'react-native';class Flash extends Component { constructor(props) {//1 super(props); this.state = {showText: true};//2 setInterval(() => { this.setState({showText: !this.state.showText}); }, 1000);//3 } render() { let display = this.state.showText ? this.props.text : '';//4 return ( <Text style={{color: 'blue'}}>{display}</Text> ); }}class FlashApp extends Component { render() { return ( <View style={{alignItems: 'center'}}> <Flash text='蓝色闪光'/>//5 </View> ); }}AppRegistry.registerComponent('firstProject', () => FlashApp);
我们自定义了Flash组件,在注释1处定义了constructor构造方法,注释2处做了初始化state的工作,默认showText的值为true。注释3处调用setInterval方法,每隔1000毫秒对showText的值进行取反,使得showText的值不断在true和false之间切换。注释4处通过showText的值来控制文本的显示,如果showText为true,则通过this.props.text来获取Flash组件的text属性的值。最后在注释5处使用我们自定义的Flash组件,将text作为Flash组件的属性并设值。运行效果如下所示。
参考资料
React Native官方文档
React Native中文网
欢迎关注我的微信公众号,第一时间获得博客更新提醒,以及更多成体系的Android相关原创技术干货。
扫一扫下方二维码或者长按识别二维码,即可关注。
- React Native探索(三)组件的Props(属性)和State(状态)
- React Native从零开始(三)Props(属性)和State(状态)
- React Native入门(三)之Props(属性)和State(状态)
- React Native State和Props
- [React-Native]Props和State
- React Native开发】React Native 基础之Props(属性)与State(状态)使用讲解
- react-native的props和state的使用
- React Native 学习笔记(四)-- State和Props
- React的props和state
- React Native组件的生命周期及属性props
- react中props和state属性
- React--Components and Props(组件和属性组件)
- React(props+state+组件生命周期)
- 浅谈React的props和state
- React props和state的区别
- React props和state的区别
- React Native的this.props获取属性
- react native学习笔记6——Props和State
- Warning:Gradle version 2.14.1-all.zip is required. Current version is 2.8
- intellij idea 插件推荐
- ios 给图片上加水印的方法
- IOS --- OC与Swift混编
- Spring中PropertyPlaceholderConfigurer的用法
- React Native探索(三)组件的Props(属性)和State(状态)
- iOS开发中实现图片旋转,造成横屏…
- red5的连接超过100个时,发送消息过多,服务器会拒绝
- iOS开发-自定义专属相册
- iOS 将图片保存到App中,并取…
- PB菜单带参数调用父窗口&父datawindow事件或函数
- 分分钟钟搞定iOS自定义相机
- 鼠标移到文字上弹出提示层JS+CSS代码
- Virtualbox for Mac 的使用