每次我的平面列表数据更改时，如何显示活动指示器？

Posted 2023-02-16

【中文标题】每次我的平面列表数据更改时，如何显示活动指示器？

【英文标题】：How do I show an activity indicator every time my flatlist data changes?

【发布时间】：2022-01-05 11:58:15

【问题描述】：

我正在使用名为 selectedStream 的状态设置我的平面列表组件显示的数据。每次用户按下不同的组选项时，selectedStream 都会发生变化。我注意到平面列表需要 1-3 秒来刷新它当前已经显示的所有帖子。我希望有一个加载指示器，以便在指示器消失时，列表已经正确显示新更新的数据。

        <FlatList   
                    maxToRenderPerBatch=5
                    bounces=false
                    windowSize=5
                    ref=feedRef   
                    data=selectedStream/> 

【参考方案1】：

每当我们处理与 UI 相关的任何事情时，有时我们可能会遇到 UI 重新渲染的延迟。但是，我们需要先弄清楚究竟是什么导致了延迟。

关于您的代码的正确问题是：

项目的渲染时间是否比预期的要长？或者，是否因为依赖于 API 调用或任何其他异步任务而延迟传递数据？

一旦你回答了这个问题，你可能会遇到两种情况：

1. FlatList 渲染视图的时间更长

这通常不会发生，因为 RN FlatList 只会呈现用户在任何给定时间可见的视图，并且会在用户滚动列表时继续呈现新视图。但是，可能存在一些闪烁的问题，您可以参考以下文章：

8 Ways to optimise your RN FlatList

2。传递数据会导致延迟

这是最常见的场景，我们可能会调用 API 端点并获取一些数据，然后执行 setState 以相应地更新任何视图/列表。一种通用的方法是显示某种进度条，表明应用程序很忙，从而保持适当的用户体验。最简单的方法是条件渲染。

一般的例子是：

const [myList, setMyList] = useState();

function callAPIforMyList()
// logic goes here


return 
  myList ? <ActivityIndicator .../> : <Flatlist .... />

上面的代码将检查myList 是undefined 还是有一个值。如果undefined，它将呈现ActivityIndicator，否则将呈现FlatList。

另一种情况可能是myList 可能有现有数据，但您需要用新数据更新/替换它。这样上面的检查可能会失败，所以我们可以再做一次检查：

const [myList, setMyList] = useState();
const [isAPIbusy, setAPIBusy] = useState(false)

function callAPIformyList() 
  setAPIBusy(true)
  /// other logics or async calls or redux-dispatch
  
  setAPIBusy(false)


return 
  !isAPIBusy && myList ? (<Flatlist .... />) : (<ActivityIndicator .../>)

 

您可以使用更多turneries添加多个条件，例如isAPIBusy ? <View1> : otherBoolean ? <View2> : <Default_View_When_No_Conditions_Match)/>

希望这有助于澄清您的需求。