React Native 探索（三）元件的 Props (屬性) 和 State (狀態)

NiZerin發表於2020-02-18
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 屬性，後面會介紹它。執行效果如下圖所示。

VYseyT.jpg

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，如下圖所示。
VYsZlV.jpg

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>。
我們執行程式，效果如下圖所示。

VYsmOU.gif

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 協議》，轉載必須註明作者和本文連結

By: Laravel-China 寧澤林
MyBlog: nizer.in

相關文章