【开源鸿蒙跨平台开发先锋训练营】Day 4~6 React Native for OpenHarmony 实战列表交互能力进阶实践

🎯 核心任务

为开源鸿蒙跨平台工程的列表清单实现 上拉加载 (Infinite Scroll) 、下拉刷新 (Pull-to-Refresh) 及 多场景数据加载提示 能力，确保交互逻辑闭环，并完成开源鸿蒙设备运行验证。
用户下拉
用户触底
是
否
组件加载 aboutToAppear
加载初始数据
渲染列表
触发 onRefresh
isRefreshing = true
请求新数据
重置 optionList
isRefreshing = false
触发 onReachEnd
isLoadingMore?
忽略
触发 loadMore
isLoadingMore = true
追加新数据
push 到 optionList
isLoadingMore = false

🛠️ 技术实现方案

1. 核心交互组件选型

虽然社区提供了 react-native-MJRefresh 等第三方库，但为了保证在 OpenHarmony 平台上的最佳兼容性 和零依赖负担 ，我们优先选用 React Native 原生的 FlatList 组件配合 RefreshControl。

FlatList : 内置了高效的列表回收机制（Virtualization），天然支持 onEndReached（上拉加载）。
RefreshControl: RN 标准下拉刷新组件，已完美适配 OpenHarmony 原生刷新控件。

2. 状态管理设计

为了实现无缝的交互体验，我们设计了完备的状态机：

状态变量	类型	作用	转换逻辑
`loading`	boolean	首次加载状态	进入页面为 true，首屏数据返回后 false
`refreshing`	boolean	下拉刷新状态	下拉触发为 true，数据更新后 false
`loadingMore`	boolean	上拉加载状态	触底触发为 true，分页数据追加后 false
`error`	boolean	请求失败状态	请求异常为 true，重试成功后 false
`hasMore`	boolean	是否有更多数据	根据返回数据量判断，用于控制 Footer 显示
`page`	number	当前页码	刷新重置为 1，上拉成功后 +1

3. 关键代码解析

我们在 onEndReached 回调中加入了严格的防抖与状态检查，防止用户快速滑动时触发重复请求。

typescript 复制代码

// src/components/ProductList.tsx

// 触底回调
const onEndReached = () => {
  // 仅在非加载中、非刷新中、非错误且有更多数据时触发
  if (!loading && !refreshing && !loadingMore && hasMore && !error) {
    const nextPage = page + 1;
    setPage(nextPage);
    loadData(nextPage, false);
  }
};

3.2 错误处理与重试机制 (Error & Retry)

针对移动端不稳定的网络环境，我们实现了"加载失败"状态。当分页请求失败时，Footer 会变更为"点击重试"按钮，用户点击后可重新发起当前页请求。

typescript 复制代码

// 列表底部组件渲染逻辑
const renderFooter = () => {
  if (error) {
     return (
      <TouchableOpacity style={styles.footer} onPress={retryLoad}>
        <Text style={styles.errorText}>加载失败，点击重试</Text>
      </TouchableOpacity>
    );
  }
  // ... 其他状态 (Loading / NoMoreData)
};

3.3 下拉刷新适配 (Pull-to-Refresh)

集成 RefreshControl 并适配 OpenHarmony 的主题色。

typescript 复制代码

<FlatList
  refreshControl={
    <RefreshControl 
      refreshing={refreshing} 
      onRefresh={onRefresh} 
      colors={['#0a59f7']} // 适配品牌色
    />
  }
  // ...
/>