"React Native and Combat" book serial "react Native network request and list binding"

This article is my published book "React Native and actual combat" serial sharing, the book by the mechanical Industry publishing house, the book detailed React Native framework underlying principles, React Native component layout, components and API Introduction and code combat, and React Nati ve and IOS, Android platform of the mixed development of the underlying principles and code demonstration, a selection of a large number of instance code, convenient for readers to learn quickly.

Books also supporting the video tutorial "80 Practical Lessons proficient React Native development", this video course is recommended to cooperate with the book study, the Book of the Central Plains rational explanation of the relatively clear, and video tutorials for components, APIs and other parts of the code of the actual development of the explanation is more intuitive.

For all books related information, please visit: http://rn.parryqiu.com

8.4 React Native Network request and list binding scheme

We will learn these two important points of knowledge by combining the Fetch API with the list component in the React Native framework, in the form of actual code.
First of all, we obtain the information of the 20 movies currently being released using the Open API of the watercress, the Watercress API address is: The Api.douban.com/v2/movie/in_theaters?count=20,api interface returns the JSON data 8-6 shown.

Figure 8-6 The JSON data returned by the Watercress API

In this sample code, the concept of component development is used, the home page loads 4 tabs, and each tab loads the corresponding pages component. The list here is loaded in the first Tab, the component is defined as Home, and the file created in the project is named Home.js.
Complete code in this book supporting the source of the 08-03 folder.

1./** 2.   * Chapters: 08-03 3. * App.js defines the large structure of the project, using 4 tabs for layout.   4. * FilePath:/08-03/listdemo/app.js 5.   * @Parry 6.    */7.  8. Import React, {Component} from ' React ';  9. Import {Platform, StyleSheet, Text, View, Image} from ' react-native ';  . Import tabnavigator from ' React-native-tab-navigator ';  Import homepage from '. Home '; 12.13.   Export default class App extends Component < {} > {14.     state = {16.   Selectedtab: ' Home ' 17.  };   18.19.     _rendercontent = (color:string, index:string) and {20.       Switch (index) {21.         Case "Home": 22.  return (<HomePage/>);   23.} 24.  };   25.26.     Render () {27.       Return (28.         <TabNavigator> 29.           <tabnavigator.item 30.           Selected={this.state.selectedtab = = = ' Home '} 31.           Title= "Home" 32.           rendericon={() = <image 33.           style= {{34.           Width:25, 35.          HEIGHT:25 36. } } />37.           Source={require ('./flux.png ')}/>} 38.           renderselectedicon={() = <image 39.           style= {{40.           Width:25, 41.          Height:25 42.           }}/>43.           Source={require ('./relay.png ')}/>} 44.           onpress={() = This.setstate ({selectedtab: ' Home '})}> 45.         {this._rendercontent (' #FFFFFF ', ' Home ')} 46.   </TabNavigator.Item> 47.                48.//The other three TAB definitions are omitted here 49.           The complete code in the book supporting source code in 50.     Wuyi </TabNavigator> 52.  ); 53.} 54.   }

The above code is part of the main logic of app.js, notice that the method of importing the external Home component in line 11th of the code, and the logic for the previous Tab component section, modifies the method of loading the corresponding component, mainly the section of line 20th.

1./** 2.   * Chapters: 08-03 3.   * Home.js defines the first Tab-loaded page component to load the Watercress movie list 4.   * The ListView Binding Method 5 is also demonstrated.   * FilePath:/08-03/listdemo/home.js 6.   * @Parry 7.    */8.  9. Import React, {Component} from ' React ';     Import {11.     Platform, 12.     StyleSheet, 13.     Text, 14.     View, 15.     Image, 16.     ListView, 17. Safeareaview 18.  } from ' react-native '; 19.20.   Export default class Homepage extends Component < {} > {21.         Constructor (props) {23.  Super (props);             This.state = {25.                 Datasource:new Listview.datasource ({//define data source 26.             Rowhaschanged: (row1, row2) = Row1!== row2 27.             }), 28.         Loaded:false 29.  };   30.} 31.         Componentdidmount () {33. This.fetchdata ();     Start request Data 34.  };     35.36.         Fetchdata () {37. Fetch ("Api.douban.com/v2/movie/in_theaters"). Then ((response) and Response.json ()). Then ((responsedata) => {38.                 This.setstate ({39.                     Datasource:this 40.                     . State 41.                     . DataSource 42.                 . Clonewithrows (Responsedata.subjects),//Read all movie data returned by 43.             Loaded:true 44.  });  }). Done ();  46.};     47.48.         Render () {49.             Return (50.                 <view style={styles.container}> 51.                     <listview Automaticallyadjustcontentinsets={false}//This option can fix the empty line 52 that will automatically come out more than approximately 10px.             Datasource={this.state.datasource} renderrow={this._renderrow}/> 53.         </View> 54.  );  55.};     56.57.         _renderrow (RowData, SectionID, RowID) {58.             Return (59.                 <SafeAreaView> 60.                     <view style={styles.row}> 61.                         <image 62.                         STYLE={STYLES.THUMB} 63.                         source= {{64. Uri: RowData.images.large 65.                     }}/> 66.                         <view style={styles.texts}> 67.                             <text style={styles.texttitle}> 68.                         {Rowdata.title} 69.                         </Text> 70.                             <text style={styles.texttitle}> 71.                         Year: {rowdata.year} 72.                         </Text> 73.                             <text style={styles.texttitle}> 74.                         Watercress score: {RowData.rating.average} 75.                     </Text> 76.                 </View> 77.                 </View> 78.             <view style={styles.separator}/> 79.         </SafeAreaView> 80.  );  81.};   82.} 83.     . var styles = Stylesheet.create ({85.         Container: {86.     Flex:1 87.     }, 88.         Row: {89.         Flexdirection: ' Row ', 90.  Padding:1091.}, 92.         Separator: {93.         Height:1, 94.     BackgroundColor: ' #EEEEEE ' 95.     }, 96.         Thumb: {97.         WIDTH:60, 98.         HEIGHT:80, 99.        Borderradius:2 100.        }, 101.            Texttitle: {102.            Flex:1, 103.            TextAlign: "Left", 104.            Paddingleft:10, 105.            FontWeight: "Bold", 106.            Flexdirection: ' Row ', 107.        Color: "#666666" 108.        }, 109.            texts:{110.            Flexdirection: ' column ', 111.        Paddingtop:5 112.    } 113.   });

The above code is the implementation of the Home component, the following mainly some important logic in the code to make some explanation:

• The code imports a new view component on line 17, Safeareaview is used to layout view under IPhone X to control the entire view security layout in the viewable area of the phone;

• The 第25-27 line of the code defines the data source of the ListView, and defines the logic of the rowhaschanged;

• Line 32nd of the Code defines the method of loading data from the API in the life cycle componentdidmount;

• The code 第36-46 line defines a method for requesting data from the Watercress API using the Fetch API, paying attention to how the Promise object returned by the fetch API is handled;

• Line 51st of the Code defines the method of the ListView binding, and the method of line rendering is the method _renderrow defined in line 57th of the Code;

• The code 第57-81 line defines how the list renders, using the View and Text components to display the list layout;

• Subsequent style definitions, like the style definitions previously learned, can be controlled with fine-grained layout.

The project runs on the IOS platform as shown in effect 8-7, the Android platform can also be downloaded directly from the book supporting source code in the local learning, testing and running.

Figure 8-7 the ListView running effect under IOS

8.5 Summary of this chapter

List binding is one of the most common development features of app development, you can open the app on your phone to find that many of the app's homepage is the action of data request, list binding or list data refresh, which is really the charm of mobile Internet, the user can always get the latest information. So this chapter is an important chapter, and from the bottom of the knowledge point to the actual combat code are explained in detail and demonstration, hoping to help you develop your App's home page list components.