9-1 RN之首页展示与分析

在第九章中，我们将实现并分析首页的功能。以下是首页的主要功能点：

1. 底部导航栏的自定义图标

   • 图标不是普通的 PNG 图片，而是使用 SVG 实现的自定义图标。

2. 头部标签页切换

   • 点击标签可以切换不同的页面，左右切换功能由头部导航器完成。

3. 渐变背景色

   • 头部导航栏的背景色使用渐变色。
   • 渐变色会随着轮播图的切换而变化。
   • 在 iOS 和 Android 端，页面从最顶部开始渲染，Android 需要额外设置以确保美观。

4. 轮播图数据展示

   • 从后台获取数据并展示轮播图。

5. 猜你喜欢组件

   • 使用 React Native 自带的 FlatList 实现，也可以自定义布局。

6. 列表展示与加载功能

   • 首页添加列表展示，并支持上拉加载更多和下拉刷新功能。

7. 动态背景色和字体颜色

   • 当页面上滑且轮播图消失时，背景色变为白色，字体颜色变为黑色。
   • Android 端效果与 iOS 一致。

在本章中，我们将逐一实现上述功能。下一节将学习如何使用自定义图标制作底部标签栏图片。