React Native实战系列第十七篇——综合案例
前言
昨天推出了React-Native写的购物车小Demo后，收到很多留言，感谢大家的支持。大多数朋友都说这种方式比较好：通过一个案例把一种类型的App中的核心功能写出来，无论是学起来还是用起来都比较有效率。
上一篇购物车案例，快速通道：大前端干货系列1—购物车；本系列大前端干货篇共6篇，这是第2篇：大前端干货系列2—网易新闻；前3篇是基于React-Native，后3篇是基于Vue，都是比较有代表性的案例。
欢迎转载，希望能帮助到更多的开发者。
一、案例简介
(一) 运行平台
iOS/Android双平台
(二) 构建语言
React-Native 0.44.0版本，遵循ES6+JSX语法
(三) 主要功能
多界面脚手架布局、新闻列表、无限轮播、新闻详情页…
(四) 主要知识点
Fetch网络数据请求封装、脚手架植入、多界面传参、图文混排、占位分发...
二、主要功能效果截图
主要效果截图
三、案例安装运行
(一) 下载项目源码
方式一：百度云盘下载
链接: https://pan.baidu.com/s/1i5MbARF 密码: mw34
方式二：GitHub下载
https://github.com/xuanzhihua
(二) 运行项目
a）打开终端，输入：cd News ，进到项目目录
b）输入：npm install，下载node_modules
c）运行在iOS设备：react-native run-ios
d）运行在Android设备：react-native run-android
四、项目主要结构分析
整个界面在整体上用TabBarItem组件和Navigator组件进行了整体页面的脚手架搭建，同学们可以在此基础上进行进一步扩展。
整个项目的整体结构分别是：首页板块（DXHome）、发现板块（DXFind）、消息板块（DXMessage）和我的板块（DXMine），其中DXMain为总集成文件，分别在index.android.js和index.ios.js中进行实例化。
项目目录结构
在网易新闻项目中，逐渐抽取了一个工具类，把项目中常用的操作统一封装了，比如最小线宽、网络请求封装，Util工具类还在进一步完善。
统一工具类封装
在项目中，通过Fetch异步请求网络数据，然后进一步进行封装，实现了多次调用，下图是主要实现代码，具体案例请下载查看。
网络请求数据
项目中的无限轮播、图文混排，还有多界面数据传递，路由分发；同学们可以下载代码进一步查看！
<p></p>
<p></p>
<p></p>
<p></p>
近期正在把公众账号的文章转移到简书，如果要了解第一动态，请关注我的微信公众账号，带你从零到一的进行React Native开发实战，在其他文章中会有对应的code和资料发放！
