第03课：首页模板和商品列表

知识点：

• 给首页添加 Banner
• 给首页添加运营模板
• 获取接口的商品
• 给顶部加一个搜索条

从这篇开始正式案例的开发，Git 仓库的地址会放到下一篇中显示，需要的读者可以直接去 Git 上看每一次提交的代码。

本文先从最早的代码形式开始一步一步的讲下去，开始开发的 App 会在某些情况下很卡，后面会将优化需要做的东西讲出来，这里先从简单的实现 App 界面开始讲，如果觉得手机反应慢，请看后面的优化部分内容。

首页容器

修改首页 index.js 文件，创建一个容器，用来放置后面要添加的各种组件。

Banner 和快捷入口

这里的 Banner 用到了一个轮播图组件，根目录下执行npm i --save react-native-swiper安装新的组件。

创建一个组件，该组件用来放 Banner 和快捷入口。

这里创建 state 中变量，banners 用来存储 banner 列表，quicks 用来存储快捷入口的列表。

请求远程接口，将返回的数据放入 state 中。

将 banner 渲染再页面上，这里有一个小技巧，如果只有一张图片就不再使用轮播图。

接下来就是快捷入口，由于快捷入口用到了 Gif 图，所以这里添加一个第三方的组件react-native-fast-image。在线的项目使用的是官方推荐的设置方法，让 RN 的 image 组件支持