React Native探索（三）组件的Props(属性)和State(状态)

相关文章
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中文网