React Native移動開發實戰-3-實現頁面間的數據傳遞

React Native使用props來實現頁面間數據傳遞和通訊。在React Native中，有兩種方式能夠存儲和傳遞數據：props（屬性）以及state（狀態），其中：

• props一般是在父組件中指定的，並且一經指定，在被指定的組件的生命週期中則再也不改變。

• state一般是用於存儲須要改變的數據，而且當state數據發生更新時，React Native會刷新界面。

瞭解了props與state的區別以後，讀者應該知道，要將首頁的數據傳遞到下一個頁面，須要使用props。因此，修改home.js代碼以下：

export default class home extends React.Component {
    // 這裏省略了沒有修改的代碼

    _renderRow = (rowData, sectionID, rowID) => {
        return (
            <TouchableHighlight onPress={() => {
                const {navigator} = this.props;             // 從props獲取navigator
                if (navigator) {
                    navigator.push({
                        name: 'detail',
                        component: Detail,
                        params: {
                            productTitle: rowData.title // 經過params傳遞props
                        }
                    });
                }
            }}>
                // 這裏省略了沒有修改的代碼
            </TouchableHighlight>
        );
    }
}

在home.js中，爲Navigator的push方法添加的參數params，會當作props傳遞到下一個頁面，所以，在detail.js中能夠使用this.props.productTitle來得到首頁傳遞的數據。修改detail.js代碼以下：

export default class detail extends React.Component {

render() {
    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={this._pressBackButton.bind(this)}>
                <Text style={styles.back}>返回</Text>
            </TouchableOpacity>
            <Text style={styles.text}> 
                {this.props.productTitle}
            </Text>
        </View>
    );
}

// 這裏省略了沒有修改的代碼

}

從新加載應用，當再次單擊商品列表時，詳情頁面將顯示單擊的商品名稱，效果如圖3.31所示。

圖3.31 詳情頁面顯示單擊的商品名稱

這樣，一個完整的頁面跳轉和頁面間數據傳遞的功能就實現了。
和我一塊兒學吧，《React Native移動開發實戰》

和我一塊兒學吧，《React Native移動開發實戰》