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

心已赠人 2022-12-09 11:49 125阅读 0赞

知识点：

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

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

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

### 首页容器 ###

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

![enter image description here][]

### Banner 和快捷入口 ###

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

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

![enter image description here][enter image description here 1]

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

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

![enter image description here][enter image description here 2]

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

![enter image description here][enter image description here 3]

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

执行`npm i --save react-native-fast-image`，然后使用 link 命令将组件加入到原生代码里，`react-native link react-native-fast-image`，执行完毕重新运行模拟器`react-native run-ios`。

![enter image description here][enter image description here 4]

将 state 中的数据渲染在 banner 的下面，这里用到了几个组件和一个新的图片，需要单独添加。ImageBackground 是 RN 在 0.47 之后的版本加入的组件，它可以将一个图片当做背景来使用，这里推荐在 0.50 之后的版本中使用。

![enter image description here][enter image description here 5]

刷新模拟器看看效果，一个简单的 banner + 入口的界面就显示出来了，是不是非常简单！

![enter image description here][enter image description here 6]

### 自定义模板 ###

从入口下面开始就是一个自定义的模板，这里使用现成的接口，现成的设计来做模板。运营人员会在后端传入图片并设置跳转链接，App 根据设计好的样式渲染模板结果，目前有 8 个模板在使用，后面可能会添加更多，这里先不管后面的新模板。

在 home 下新建一个`floor_modules.js`文件，自定义模板单独放在这里处理，由于代码比较长就不贴出来了，有想看具体情况的可以去 Git 仓库看。

![enter image description here][enter image description here 7]

![c8d9e820-1942-11e8-8087-9b6b3b447adf][]

到目前为止使用还是 View 组件，该组件是不支持滑动的，要想列表可以滑动，需要将渲染结果放在专门的列表组件中才行。这里不适用 ScrollView 的原因是，FlatList 可以在滚动的时候隐藏屏幕外的无用节点，可以提高列表性能，尤其是列表非常长的时候。

![enter image description here][enter image description here 8]

把刚才写的两个组件放到 Flatlist 中的 header 组件中 ListHeaderComponent。

*  使用 numColumns 设置列表为双列。
 *  使用 refreshing 传入下拉刷新使用到的变量。
 *  使用 onRefresh 在下拉刷新的时候重新获取列表数据。
 *  使用 onEndReached 在滑动到列表底部的时候加载下一页。
 *  使用 ListHeaderComponent 渲染列表的头。
 *  使用 renderItem 渲染列表项。
 *  使用 ListFooterComponent 设置底部的文字，一般可以给加载下一页展示加载的状态、文字。
 *  使用 onScroll 在滑动的时候触发自己的事件，这里使用 scrollEventThrottle 控制触发的频率，内部的数字就是 1000 毫秒内触发的次数，数字越大触发越少。
 *  使用 keyExtractor 设置列表每个项的 key，在列表判断列表项的时候会使用这个返回的 ID 作为 key。注意，这里返回的值不能重复。
 *  使用 data 设置商品的项，必须是数组。

### 商品列表 ###

首先给上面的两个组件添加一个名字，然后在刷新方法里调用他们的刷新方法，这样就可以做到在下拉刷新的时候同时可以刷新前面两个组件。

![enter image description here][enter image description here 9]

添加一个请求数据的方法并在组件初始化结束之后调用方法，这里使用 await 来达到同步等待请求结果的效果。注意，必须使用 try 来包裹这个方法，否则在返回错误信息的时候会发生 App 奔溃的效果。

![enter image description here][enter image description here 10]

这里设置了一个 start 变量来存储页码。需注意，只有需要改变 UI 的变量才需要放到 state 里面，其他的尽量放到组件自身上面或者其他地方，否则在改变一些无意义的数据的时候也会触发界面刷新。

![enter image description here][enter image description here 11]

这里把加载下一页单独写成一个方法了，有的手机在初始化列表的时候不仅会调用一次获取第一页的方法，同时也会调用一次下一页的方法。

新建商品列表组件 GoodItem，修改 Flatlist 组件，把 GoodItem 放到内容渲染方法里。

![enter image description here][enter image description here 12]

这里将数组序号也传入组件，目的是给商品列表的每一项添加一个不一样的样式，这里设置的样式在 Android 和 iOS 上会有不同的效果：

![enter image description here][enter image description here 13]

通过取余方法即可完成每行有两种不同的样式，这在双列的列表中非常的常用。

![fccbecd0-1949-11e8-8087-9b6b3b447adf][]

首页列表中的这个大块头部组件和列表中的非常多得商品项会暴露出很多问题，后面会把这一块优化，以达到和原生一样的效果。

### 头部组件 ###

初步开发已经完成了，但是还需要在这个的基础上再加上头部组件，这个组件负责显示用的一些信息和一个假的搜索条。这样才是一个完整的 App 该有的样子。

添加一个 SearchHeader 组件，用来做商品列表页的顶部。

\`\`\` javascript //顶部搜索条组件 class SearchHeader extends React.Component\{ render()\{ //这里先不去管具体的内容 return <View></View> \} \}

将组件放在最外层，同时使用绝对定位将顶部浮动在所有组件的最前面。这里先不讲动画，看着难受的读者可以先把浮动的组件改成普通的组件。
    
    ![enter image description here](http://images.gitbook.cn/80e0ea40-194d-11e8-8087-9b6b3b447adf)

javascript const styles = StyleSheet.create(\{ headerView: \{ position: "absolute", left: 0, right: 0, top: 0, zIndex: 100, \}, pageView: \{ flex: 1, width: deviceWidth, \}, loading: \{ textAlign: 'center', fontSize: px(28), color: "\#ccc" \}, \}) \`\`\`

顶部添加一个头像显示组件，中间添加一个输入框，该输入框没有实际的功能，主要是为了跳转到真正的搜索页的。

![enter image description here][enter image description here 14]

到这里基本就开发完了，将它们组合在一起然后刷新页面。

![50a934d0-194e-11e8-8087-9b6b3b447adf][]

### 完成 ###

到这里就完成了基础的首页开发，一个简单的首页就呈现在外面的面前。如果懂打包的读者已经可以马上打一个 APK 文件了。这里稍微注意一下，模拟器使用的是 iOS，打包最方便的还是 Android，但是 iOS 和 Android 在某些情况下会有一些区别，比如样式上会根据手机的不同有一些不一样的效果，有些组件甚至只支持 iOS。

在浏览的时候也会看到滑动会有一些生涩，点击跳转也没有做，顶部最好有一些动画等等，这些在后面都会有涉及。

![enter image description here][enter image description here 15]

图中就是在说列表太长导致更新很慢，同时还提醒开发者使用 PureComponent 来优化性能，后面将介绍怎样使用 purComponent 和 shouldComponentUpdate 来优化性能。

[enter image description here]: /images/20221123/5ff3adaa55024c01aad40148d31e7368.png
[enter image description here 1]: /images/20221123/653739dddbb24b6a949053df0153f418.png
[enter image description here 2]: /images/20221123/5e27e5aef1354e09a05c1baf476ef00a.png
[enter image description here 3]: /images/20221123/1dc5088d11924bbc877fbe72ece0de6e.png
[enter image description here 4]: /images/20221123/19ed203e52aa4341a44c5eb7179d5a6c.png
[enter image description here 5]: /images/20221123/cdbc1192dcb446d3a8fa7784ebde0fac.png
[enter image description here 6]: /images/20221123/0ced1e3eccc948bfb24454811f78365e.png
[enter image description here 7]: /images/20221123/2b5db499e39b40898116a719bdae195e.png
[c8d9e820-1942-11e8-8087-9b6b3b447adf]: /images/20221123/c584abb3f9554632bf72f448639bef65.png
[enter image description here 8]: /images/20221123/0032a1ff03c746b59ec53a73a28186ae.png
[enter image description here 9]: /images/20221123/fbdb38bc17c347d69e699f00506aef15.png
[enter image description here 10]: /images/20221123/90b715f18e064222bb893d21482146fb.png
[enter image description here 11]: /images/20221123/2b4a48dad928416186f0adeaa494de49.png
[enter image description here 12]: /images/20221123/e76396b45d2046dbbe76aeaaa64874e0.png
[enter image description here 13]: /images/20221123/97e63aec621444a88ea4f6cdcb39dd15.png
[fccbecd0-1949-11e8-8087-9b6b3b447adf]: /images/20221123/c781dfefc5b4486c88608afed9c286c3.png
[enter image description here 14]: /images/20221123/673d9bcc02f4433db58f88943afaa375.png
[50a934d0-194e-11e8-8087-9b6b3b447adf]: /images/20221123/9b8a79cb838645e9b1771916b40e0330.png
[enter image description here 15]: /images/20221123/a4aa94e1a56e4ce3a44f36c67292afbb.png