介绍

本示例针对应用开发中相当常见的瀑布流页面场景，基于按需渲染、组件复用等技术，使用RN框架实现了高性能瀑布流页面。

效果预览

（页面由顶部搜素框，功能区，瀑布流，瀑布流卡片由直播卡片、图片卡片、视频卡片组成）

操作流程：

1. 确保手机已成功接入网络；
2. 下拉刷新页面
   • 步骤：当瀑布流位于顶部时，执行下拉刷新操作。
   • 效果： 触发网络请求，展示加载动画，数据加载完成后隐藏加载动画并刷新页面内容。
3. 上拉加载更多
   • 步骤：执行上拉加载更多操作，触发网络请求。
   • 效果： 展示加载动画并提示“——加载中，请稍后——”，数据加载完成后隐藏加载动画和加载提示并展示更多卡片内容。
4. 自动播放直播卡片
   • 步骤：滑动瀑布流内容区，让直播卡片完整显示。
   • 效果： 直播卡片自动开始播放；
5. 快速回到页面顶部。
   • 操作：点击底部首页 Tab 。
   • 效果：页面自动滚动回到顶部。

场景实现

详细场景实现，请参考基于RN框架实现高性能瀑布流页面。

工程目录

home_fluency
├── RNHomeFluency 前端工程
└── HomeFluency 原生工程

安装教程

1. 在 RNHomeFluency 中，运行 pnpm i 安装依赖，然后运行 "pnpm codegen", 再运行 "pnpm dev" 生成bundle.harmony.js；
2. 在 DevEco Studio 中打开 HomeFluency,等待工程自动同步完成，(手动同步，执行 Sync and Refresh Project)；
3. 点击 File > Project Structure > Signing Configs，登录并完成签名；
4. 点击右上角的 run 启动项目。