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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.