Introduction

This example demonstrates a common scenario in app development: a high-performance waterfall flow page, implemented using the RN framework. It leverages techniques like on-demand rendering and component reuse.

Running Effect Screenshot

Page Layout: The page consists of a top search bar, a functional area, and a waterfall layout. The waterfall layout contains live video cards, image cards, and video cards.

Operation Process:

Ensure the phone is successfully connected to the network;
Pull-to-refresh the page:
- Step: Perform a pull-down refresh operation when the waterfall layout is at the top.
- Effect: Trigger a network request, display a loading animation, and once the data is loaded, hide the loading animation and refresh the page content.
Pull-up to load more:
- Step: Perform a pull-up to load more operation to trigger a network request.
- Effect: Display the loading animation and prompt "- loading, please wait -". After the data loading is complete, hide the loading animation and loading prompt and display more card content.
Auto-play live video cards:
- Step: Scroll the waterfall layout to fully display the live video card.
- Effect: The live video card will automatically start playing.
Quickly return to the top of the page:
- Action: Click the bottom Home Tab.
- Effect: The page will automatically scroll back to the top.

Scene Implementation

For a detailed implementation, please refer to High-Performance Waterfall Flow Page with RN Framework.

Project Directory

home-fluency
├── RNHomeFluency   Frontend Project
└── HomeFluency     Native Project

Installation Guide

In RNHomeFluency, run pnpm i to install dependencies, then run pnpm codegen to generate code file, then run pnpm dev to generate the bundle.harmony.js；;
Open HomeFluency in DevEco Studioand and wait for the automatic project synchronization to complete (for manual synchronization, execute Sync and Refresh Project);
Return to DevEco Studio, click File > Project Structure > Signing Configs, log in and complete the signing;
Click the run button on the top right to start the project;