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移動開發實戰》