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

前言

在 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 组件的属性并设值。

本作品采用《CC 协议》，转载必须注明作者和本文链接