此文是我的出版書籍《React Native 精解與實(shí)戰(zhàn)》連載分享，此書由機(jī)械工業(yè)出版社出版，書中詳解了 React Native 框架底層原理、React Native 組件布局、組件與 API 的介紹與代碼實(shí)戰(zhàn)，以及 React Native 與 iOS、Android 平臺的混合開發(fā)底層原理講解與代碼實(shí)戰(zhàn)演示，精選了大量實(shí)例代碼，方便讀者快速學(xué)習(xí)。

書籍還配套了視頻教程「80 節(jié)實(shí)戰(zhàn)課精通 React Native 開發(fā)」，此視頻課程建議配合書籍學(xué)習(xí)，書籍中原理性的東西講解的比較清晰，而視頻教程對于組件、API 等部分的代碼實(shí)戰(zhàn)開發(fā)講解比較直觀。

書籍相關(guān)所有資料請?jiān)L問：http://rn.parryqiu.com

8.4 React Native 網(wǎng)絡(luò)請求與列表綁定方案

下面我們就通過結(jié)合 Fetch API 以及 React Native 框架中的列表組件，通過代碼實(shí)戰(zhàn)的形式進(jìn)行這兩個(gè)重要知識點(diǎn)的學(xué)習(xí)。
首先我們數(shù)據(jù)獲取使用豆瓣的公開 API，獲取目前正在上映的 20 部電影的信息，豆瓣 API 地址為：https://api.douban.com/v2/movie/in_theaters?count=20，API 接口返回的 JSON 數(shù)據(jù)如圖 8-6 所示。

圖 8-6 豆瓣 API 返回的 JSON 數(shù)據(jù)

在此示例代碼中，將采用組件開發(fā)的思想，首頁加載 4 個(gè) Tab，每一個(gè) Tab 加載對應(yīng)的頁面組件。這里的列表加載在第一個(gè) Tab 中，組件定義為 Home，在項(xiàng)目中建立的文件名為 home.js。
完整代碼在本書配套源碼的 08-03 文件夾。

1. /** 2. * 章節(jié): 08-03 3. * App.js 定義了項(xiàng)目的大結(jié)構(gòu)，使用 4 個(gè) Tab 進(jìn)行布局。 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'; 10. import TabNavigator from 'react-native-tab-navigator'; 11. import HomePage from './home'; 12. 13. export default class App extends Component < {} > { 14. 15. state = { 16. selectedTab: 'home' 17. }; 18. 19. _renderContent = (color : string, index : string) => { 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="首頁" 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. ...... //此處省略了其他三個(gè) Tab 的定義 49. //完整代碼在書籍的配套源碼中 50. 51. </TabNavigator> 52. ); 53. } 54. }

上面這段代碼為 App.js 的部分主要邏輯，注意在代碼的第 11 行導(dǎo)入外部 Home 組件的方法，以及針對之前 Tab 組件章節(jié)的邏輯修改了加載對應(yīng)組件的方法，主要為代碼第 20 行的部分。

1. /** 2. * 章節(jié): 08-03 3. * home.js 定義了第一個(gè) Tab 加載的頁面組件，用于加載豆瓣電影列表 4. * 同時(shí)演示了 ListView 綁定方法 5. * FilePath: /08-03/ListDemo/home.js 6. * @Parry 7. */ 8. 9. import React, {Component} from 'react'; 10. 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. 22. constructor(props) { 23. super(props); 24. this.state = { 25. dataSource: new ListView.DataSource({ //定義數(shù)據(jù)源 26. rowHasChanged: (row1, row2) => row1 !== row2 27. }), 28. loaded: false 29. }; 30. } 31. 32. componentDidMount() { 33. this.fetchData(); //開始請求數(shù)據(jù) 34. }; 35. 36. fetchData() { 37. fetch("https://api.douban.com/v2/movie/in_theaters").then((response) => response.json()).then((responseData) => { 38. this.setState({ 39. dataSource: this 40. .state 41. .dataSource 42. .cloneWithRows(responseData.subjects), //讀取返回的所有電影數(shù)據(jù) 43. loaded: true 44. }); 45. }).done(); 46. }; 47. 48. render() { 49. return ( 50. <View style={styles.container}> 51. <ListView automaticallyAdjustContentInsets={false} //此選項(xiàng)可以修復(fù)掉會(huì)自動(dòng)多出來的大約 10px 的空行 52. 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. 年份: {rowData.year} 72. </Text> 73. <Text style={styles.textTitle}> 74. 豆瓣評分: {rowData.rating.average} 75. </Text> 76. </View> 77. </View> 78. <View style={styles.separator}/> 79. </SafeAreaView> 80. ); 81. }; 82. } 83. 84. var styles = StyleSheet.create({ 85. container: { 86. flex: 1 87. }, 88. row: { 89. flexDirection: 'row', 90. padding: 10 91. }, 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. });

上面代碼為 Home 組件的實(shí)現(xiàn)方法，下面主要對代碼中的一些重要邏輯作一些說明：

• 代碼在 17 行導(dǎo)入了一個(gè)新的 View 組件，SafeAreaView 用于在 iPhone X 下布局 View 而控制整個(gè) View 安全布局于手機(jī)的可視區(qū)域中；

• 代碼的第 25 - 27 行，定義了 ListView 的數(shù)據(jù)源，同時(shí)定義了 rowHasChanged 的邏輯；

• 代碼第 32 行在生命周期 componentDidMount 中定義了從 API 中加載數(shù)據(jù)的方法；

• 代碼第 36 - 46 行定義了從豆瓣 API 使用 Fetch API 請求數(shù)據(jù)的方法，注意對 Fetch API 返回的 Promise 對象的處理方法；

• 代碼第 51 行定義了 ListView 綁定的方法，行渲染的方法為代碼中第 57 行定義的方法 _renderRow；

• 代碼第 57 - 81 行定義了列表渲染的方法，使用 View 與 Text 組件進(jìn)行了列表的展示布局；

• 后續(xù)的樣式定義如之前學(xué)習(xí)的樣式定義一樣，進(jìn)行精細(xì)布局控制即可。

項(xiàng)目運(yùn)行在 iOS 平臺的效果如圖 8-7 所示，Android 平臺大家也可以直接下載本書配套源碼在本地學(xué)習(xí)、測試與運(yùn)行。

圖 8-7 iOS 下的 ListView 運(yùn)行效果

8.5 本章小結(jié)

列表綁定是 App 開發(fā)最常用的一個(gè)開發(fā)功能，你可以隨手打開自己手機(jī)上的 App 就會(huì)發(fā)現(xiàn)許多 App 的首頁都是進(jìn)行了數(shù)據(jù)請求、列表綁定或列表數(shù)據(jù)刷新等動(dòng)作，這也真是移動(dòng)互聯(lián)網(wǎng)的魅力所在，用戶可以隨時(shí)獲取到最新的資訊信息。所以此章節(jié)是一個(gè)重要的章節(jié)，并從底層知識點(diǎn)到實(shí)戰(zhàn)代碼都進(jìn)行了詳細(xì)地講解與演示，希望能幫助你開發(fā)出你的 App 的首頁列表組件。

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。