相关文章
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相关原创技术干货。
扫一扫下方二维码或者长按识别二维码，即可关注。
网友评论