此文是我的出版書籍《React Native 精解與實戰》連載分享，此書由機械工業出版社出版，書中詳解了 React Native 框架底層原理、React Native 組件布局、組件與 API 的介紹與代碼實戰，以及 React Native 與 iOS、Android 平臺的混合開發底層原理講解與代碼實戰演示，精選了大量實體代碼，方便讀者快速學習，
書籍還配套了視頻教程「80 節實戰課精通 React Native 開發」，此視頻課程建議配合書籍學習，書籍中原理性的東西講解的比較清晰，而視頻教程對于組件、API 等部分的代碼實戰開發講解比較直觀，
書籍相關所有資料請訪問：http://rn.parryqiu.com
相關連載更新
《React Native 精解與實戰》書籍連載「React 與 React Native 簡介」
《React Native 精解與實戰》書籍連載「React Native 底層原理」
《React Native 精解與實戰》書籍連載「Node.js 簡介與 React Native 開發環境配置」
《React Native 精解與實戰》書籍連載「React Native 中的生命周期」
原創「80節實戰課精通 React Native 開發」視頻課程大綱
8.4 React Native 網路請求與串列系結方案
下面我們就通過結合 Fetch API 以及 React Native 框架中的串列組件，通過代碼實戰的形式進行這兩個重要知識點的學習，
首先我們資料獲取使用豆瓣的公開 API，獲取目前正在上映的 20 部電影的資訊，豆瓣 API 地址為：https://api.douban.com/v2/movie/in_theaters?count=20，API 介面回傳的 JSON 資料如圖 8-6 所示，
圖 8-6 豆瓣 API 回傳的 JSON 資料
在此示例代碼中，將采用組件開發的思想，首頁加載 4 個 Tab，每一個 Tab 加載對應的頁面組件，這里的串列加載在第一個 Tab 中，組件定義為 Home，在專案中建立的檔案名為 home.js，
完整代碼在本書配套原始碼的 08-03 檔案夾，
1. /**
2. * 章節: 08-03
3. * App.js 定義了專案的大結構，使用 4 個 Tab 進行布局，
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. ...... //此處省略了其他三個 Tab 的定義
49. //完整代碼在書籍的配套原始碼中
50.
51. </TabNavigator>
52. );
53. }
54. }
上面這段代碼為 App.js 的部分主要邏輯，注意在代碼的第 11 行匯入外部 Home 組件的方法，以及針對之前 Tab 組件章節的邏輯修改了加載對應組件的方法，主要為代碼第 20 行的部分，
1. /**
2. * 章節: 08-03
3. * home.js 定義了第一個 Tab 加載的頁面組件，用于加載豆瓣電影串列
4. * 同時演示了 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({ //定義資料源
26. rowHasChanged: (row1, row2) => row1 !== row2
27. }),
28. loaded: false
29. };
30. }
31.
32. componentDidMount() {
33. this.fetchData(); //開始請求資料
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), //讀取回傳的所有電影資料
43. loaded: true
44. });
45. }).done();
46. };
47.
48. render() {
49. return (
50. <View style={styles.container}>
51. <ListView automaticallyAdjustContentInsets={false} //此選項可以修復掉會自動多出來的大約 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 組件的實作方法，下面主要對代碼中的一些重要邏輯作一些說明：
- 代碼在 17 行匯入了一個新的 View 組件，SafeAreaView 用于在 iPhone X 下布局 View 而控制整個 View 安全布局于手機的可視區域中；
- 代碼的第 25 - 27 行，定義了 ListView 的資料源，同時定義了 rowHasChanged 的邏輯；
- 代碼第 32 行在生命周期 componentDidMount 中定義了從 API 中加載資料的方法；
- 代碼第 36 - 46 行定義了從豆瓣 API 使用 Fetch API 請求資料的方法，注意對 Fetch API 回傳的 Promise 物件的處理方法；
- 代碼第 51 行定義了 ListView 系結的方法，行渲染的方法為代碼中第 57 行定義的方法 _renderRow；
- 代碼第 57 - 81 行定義了串列渲染的方法，使用 View 與 Text 組件進行了串列的展示布局；
- 后續的樣式定義如之前學習的樣式定義一樣，進行精細布局控制即可，
專案運行在 iOS 平臺的效果如圖 8-7 所示，Android 平臺大家也可以直接下載本書配套原始碼在本地學習、測驗與運行，
圖 8-7 iOS 下的 ListView 運行效果
8.5 本章小結
串列系結是 App 開發最常用的一個開發功能，你可以隨手打開自己手機上的 App 就會發現許多 App 的首頁都是進行了資料請求、串列系結或串列資料重繪等動作，這也真是移動互聯網的魅力所在，用戶可以隨時獲取到最新的資訊資訊，所以此章節是一個重要的章節，并從底層知識點到實戰代碼都進行了詳細地講解與演示，希望能幫助你開發出你的 App 的首頁串列組件，
個人技術視頻博客站點：https://devopen.club/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147293.html
標籤：JavaScript