React Native mobile development practices-3-implement data transfer between pages, react-3-

React Native mobile development practices-3-implement data transfer between pages, react-3-

React Native uses props to transmit and communicate data between pages. In React Native, there are two ways to store and transmit data: props (attribute) and state (state), where:

• Props is usually specified in the parent component, and once specified, it will not change in the lifecycle of the specified component.
• State is usually used to store the data to be changed. When the state data is updated, React Native refreshes the interface.

After learning about the difference between props and state, you should know that to pass the data on the home page to the next page, you need to use props. Therefore, modify the home. js Code as follows:

 

Export default class home extends React. component {// The unmodified code _ renderRow = (rowData, sectionID, rowID) => {return (<TouchableHighlight onPress = {() is omitted here {() ==>{ const {navigator} = this. props; // obtain navigatorif (navigator) {navigator from props. push ({name: 'detail', component: detail, params: {productTitle: rowData. title // pass props through params}); }}>// the unmodified code is omitted here </TouchableHighlight> );}}

　　

In the home. in js, the parameter params added for the push method of Navigator is passed to the next page as a props. this. props. productTitle to obtain the data transmitted on 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 }> return </Text> </TouchableOpacity> <Text style = {styles. text }>{ this. props. productTitle} </Text> </View>);} // No code modified here}

　　

Reload the application. When you click the product list again, the product name is displayed on the details page, as shown in Figure 3.31.

Figure 3.31 product name displayed on the details page

 

In this way, a complete page Jump and data transfer between pages are achieved.

Learn With Me, React Native mobile development practices