React Native Mobile Development-3-implement data transfer between pages

React native uses props for data transfer and communication between pages. In react native, there are two ways to store and pass data: props (attributes) and state (states), Where:

• Props is typically specified in the parent component and, once specified, no longer changes in the lifetime of the specified component.
• State is typically used to store data that needs to be changed, and React native refreshes the interface when the state data is updated.

After understanding the difference between props and state, the reader should be aware that it is necessary to use props to pass data from the first page to the next. So, modify the Home.js code as follows:

Export default class Home extends React.component {//omitted code not modified here _renderrow = (RowData, SectionID, RowID) = {return ( <touchablehighlight onpress={() = {const {navigator} = This.props;//Get props from Navigatorif (navigator) { Navigator.push ({name: ' Detail ', component:detail,params: {productTitle:rowData.title//pass through params Props}}}} >//omitted code </TouchableHighlight>);}}

　　

In Home.js, the parameter params added for the navigator push method is passed as props to the next page, so this.props.productTitle can be used in detail.js to get the data passed by the home page. Modify the Detail.js code as follows:

Export default class detail extends React.component {render () {return (<view style={styles.container}>< Touchableopacity Onpress={this._pressbackbutton.bind (this)}><text style={styles.back}> back </Text> </touchableopacity><text style={styles.text}> {this.props.producttitle}</text></view>);} No modified code is omitted here}

　　

Reload the app, and when you click the item list again, the details page will display the item name you clicked, as shown in effect 3.31.

Figure 3.31 The details page shows the name of the item clicked

In this way, a complete page jump and data transfer between the pages of the function is realized.

Learn with me, "React native mobile development Combat"

React Native Mobile Development-3-implement data transfer between pages