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中文網