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:

Operation Process:

1. Ensure the phone is successfully connected to the network;
2. 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.
3. 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.
4. 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.
5. 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

1. 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；;
2. Open HomeFluency in DevEco Studioand and wait for the automatic project synchronization to complete (for manual synchronization, execute Sync and Refresh Project);
3. Return to DevEco Studio, click File > Project Structure > Signing Configs, log in and complete the signing;
4. Click the run button on the top right to start the project;