從我寫第一篇React Native文章以來，我們幾乎是把所有的程式碼都放在一個js檔案中實現的，隨著工程複雜度的增加，各種自定義控制元件的程式碼就和業務邏輯程式碼耦合嚴重，這篇文章就來解決這一問題，讓我們一起來學習控制元件封裝的方法。

1.明確需求

首頁功能按鈕由一個圖片、一行文字，縱向排列組成，當點選一個控制元件時，同時觸發點選事件。

目前我們需要的是8個這樣的控制元件，如果我們為每個控制元件都寫一堆JSX，那麼程式碼就會很混亂，而如果我們在當前的JS檔案中編寫一個方法（如_renderButton()），專門用於生產這樣的控制元件，雖然可以少寫一些程式碼，但容易和其他業務邏輯程式碼耦合在一起，這樣不便於維護和更新，所以，最好的辦法是把這樣一種組合檢視，封裝為控制元件，並單獨寫在一個JS檔案中，此時，我們可以確定一下這個控制元件的屬性：

①圖片：用於展示的Icon，暫定為來自本地，為number型別

②標題：展示的標題，一串文字，為String型別

③Tag：用於區分按鈕，為String型別

④回撥函式：用於在點選該按鈕時進行回撥，為Function型別（回撥時應該考慮回傳Tag）

2.設計控制元件樣式

首先我們在home目錄中新建一個js檔案，名為MenuButton.js，引入我們需要的Image、Text、View以及其他的常用庫，Component、StyleSheet，同時建立一個可匯出的類，如下圖所示

 

接著，我們可以根據我們對按鈕結構的分析，以及掌握的尺寸資訊，在render方法中設計控制元件的佈局，並建立控制元件的樣式，由於這個控制元件的結構很簡單，所以這裡直接給出程式碼，首先是render函式：

    render() {
        return (
            <TouchableWithoutFeedback>
                <View style={{alignItems:'center',flex:1}}>
                    <Image style={styles.iconImg} />
                    <Text>Example Text</Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }
 

下來是樣式：

const styles = StyleSheet.create({
    iconImg: {
        width: 38,
        height: 38,
        marginBottom: 2
    }
});

這裡我們可以看到，在render函式中，我並沒有為Image指定source，Text也只是加了一串示例文字，不要著急，下面就是控制元件封裝的關鍵！

3.宣告控制元件屬性

當我們的控制元件佈局已經建立完成以後，其中的問題就是，如何把我們需要的值，包括icon圖片、title文字、回撥函式等內容傳到當前控制元件中呢？

這裡的關鍵就在於：控制元件屬性的宣告

為什麼要進行屬性宣告？

原因很簡單，拿Image控制元件來說，我們常常用下面的方式指定Image的樣式、圖片等內容

<Image style={...} source={...} />

想要讓自己構建的控制元件也能像上沒的方式那樣進行定義，就必須使用屬性

根據我們之前的分析，主頁功能按鈕的屬性可以這樣進行宣告，將如下程式碼寫在建構函式之前即可：

    static propTypes = {
        renderIcon: PropTypes.number.isRequired,  // 圖片,加入.isRequired即為比填項
        showText: PropTypes.string,  // 顯示標題\文字
        tag: PropTypes.string,  // Tag
        onClick: PropTypes.func  // 回撥函式
    };

對於PropTypes的使用，需要在檔案頭部，和Text、View這些一起，引入PropTypes即可。

接著，我們需要將屬性內容進行處理，但在處理之前，需要介紹一下這些屬性是怎麼獲得的。

其實，從本質上講，在JSX中，利用<>宣告一個控制元件，在將其轉換為真正的Native控制元件時，會首先呼叫其對應的JS原始碼，而JS原始碼首先會執行帶有props的建構函式，此建構函式會將我們在JSX中寫到的屬性，存在當前類的props中。

如上圖所示，這種過程類似於在0.16之前使用ES5的語法中，呼叫getDefaultProps方法，進行初始化。並且，我們在JSX中寫入的屬性，會以鍵值對的形式儲存，所以我們在以後的使用中，即可從this.props中取到在JSX中寫到的屬性了。
由於JavaScript語法的自由性，其實這些屬性不在static propTypes中宣告，只要JSX中寫了，後面也是可以取到的，但是為了可讀性和安全性，建議大家還是在static propTypes中宣告清楚！

4.使用屬性

首先，我們先在render函式中，為TouchableWithoutFeedback控制元件新增onPress事件，為Image新增source，為Text新增顯示的文字，如下程式碼：

    render() {
        return (
            <TouchableWithoutFeedback onPress={this._onClick}>
                <View style={{alignItems:'center',flex:1}}>
                    <Image style={styles.iconImg} source={this.props.renderIcon}/>
                    <Text>{this.props.showText}</Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }

為了安全，我們在當前類中加入了_onClick方法，用來進行回撥函式的具體操作，它的功能是保證在設定了回撥函式的情況下執行回撥，而未設定則不回撥：

    _onClick() {
        if (this.props.onClick) {   // 在設定了回撥函式的情況下
            this.props.onClick(this.props.showText, this.props.tag);  // 回撥Title和Tag
        }
    }

然而，由於需要使用this來獲取props，由於在ES6中，函式預設是不繫結this的，所以請一定在建構函式中對函式進行繫結，否則將無法取值：

    constructor(props) {
        super(props);
        this._onClick = this._onClick.bind(this);  // 需要在回撥函式中使用this,必須使用bind(this)來繫結
    }

這樣一來，我們的控制元件封裝也就基本結束了，下來就可以在HomeScreen.js中使用了！

5.使用封裝好的控制元件

正如其他控制元件一樣，我們只需要將自己封裝的控制元件import進來，即可在render中使用了

import MenuButton from './MenuButton';

                <View style={styles.menuView}>
                    <MenuButton renderIcon={require('../images/home_icons/wdgz.png')}
                                showText={'我的關注'} tag={'wdgz'}
                                onClick={this._onMenuClick}/>
                    <MenuButton renderIcon={require('../images/home_icons/wlcx.png')}
                                showText={'物流查詢'} tag={'wlcx'}
                                onClick={this._onMenuClick}/>
                    <MenuButton renderIcon={require('../images/home_icons/cz.png')}
                                showText={'充值'} tag={'cz'}
                                onClick={this._onMenuClick}/>
                    <MenuButton renderIcon={require('../images/home_icons/dyp.png')}
                                showText={'電影票'} tag={'dyp'}
                                onClick={this._onMenuClick}/>
                </View>

這裡只給出第一行4個圖示的程式碼，完整程式碼請到我的Github上檢視：https://github.com/yuanguozheng/JdApp

好了，大功告成，在模擬器上看看程式執行效果吧：