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

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

截图

此文是我的出版书籍《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 的首页列表组件。


作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
1月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
1月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
2天前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
9 1
|
4天前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
13天前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
20 2
|
18天前
|
存储 JavaScript 前端开发
基于React和Redux的待办事项列表应用
基于React和Redux的待办事项列表应用
25 0
|
18天前
|
存储 前端开发
构建一个简单的React待办事项列表应用
构建一个简单的React待办事项列表应用
22 0
|
24天前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。
|
1月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
1月前
|
移动开发 前端开发 JavaScript
使用React Native进行跨平台移动开发
【5月更文挑战第13天】React Native是Facebook的跨平台移动开发框架,基于JavaScript和React,允许开发者编写原生应用。它提供跨平台性、原生性能、平缓的学习曲线及丰富的社区支持。开发流程包括安装CLI、创建项目、编写代码、运行调试及测试发布。进阶应用涉及状态管理、性能优化、原生模块集成和自动化测试。React Native降低了开发成本,提升了效率,是移动开发的优选方案。