《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

此文是我的出版书籍《React Native 精解与实战》连载分享，此书由机械工业出版社出版，书中详解了 React Native 框架底层原理、React Native 组件布局、组件与 API 的介绍与代码实战，以及 React Native 与 iOS、Android 平台的混合开发底层原理讲解与代码实战演示，精选了大量实例代码，方便读者快速学习。

书籍还配套了视频教程「80 节实战课精通 React Native 开发」，此视频课程建议配合书籍学习，书籍中原理性的东西讲解的比较清晰，而视频教程对于组件、API 等部分的代码实战开发讲解比较直观。

书籍相关所有资料请访问：http://rn.parryqiu.com

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 的首页列表组件。