03.基础-首页模板和商品列表

知识点：
1.给首页添加banner
2.给首页添加运营模板
3.获取接口的商品
4.给顶部加一个搜索条

从这章开始我们正式开始案例的开发。git仓库的地址会放到下一章显示，需要的同学可以直接去git上看每一次提交的代码。

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

首页容器

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

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

创建一个组件，这个组件用来放Banner和快捷入口。
enter image description here

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

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

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

接下来就是快捷入口，由于快捷入口用到了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

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

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

自定义模板

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

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

enter image description here

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

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

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

商品列表

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

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

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

enter image description here

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

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

这里将数组序号也传入组件，目的是给商品列表的每一项添加一个不一样的样式。这里设置的样式在安卓和ios上会有不同的效果
enter image description here

通过取余方法即可完成每行有2中不同的样式。这在双列的列表中非常的常用。
enter image description here

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

头部组件

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

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

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

将组件放在最外层，同时使用绝对定位将顶部浮动在所有组件的最前面。这里先不讲动画，看着难受的同学可以先把浮动的组件改成普通的组件。
enter image description here

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

完成

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

在浏览的时候也会看到滑动会有一些生涩，点击跳转也没有做。顶部最好有一些动画等等。这些在后面都会有涉及。
enter image description here
图中就是在说列表太长导致更新很慢，同时还提醒开发者使用PureComponent来优化性能。后面会教大家怎样使用purComponent和shouldComponentUpdate来优化性能。