每次平面列表数据更改时，如何显示 activity 指示符？

Question

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

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

Answer 1

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

询问您的代码的正确问题是：

Is the rendering of items taking longer than expected? Or, is the data being passed with a delay because it is dependant on an API call or any other async task?

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

1. FlatList 需要更长的时间来呈现视图

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

8 Ways to optimise your RN FlatList

2。传递数据导致延迟

这是最常见的情况，我们可以调用 API 端点并获取一些数据，然后 setState 相应地更新任何 view/list。一种通用的方法是显示某种进度条，指示应用程序正忙，从而保持适当的用户体验。最简单的方法是 条件渲染.

一个一般的例子是：

const [myList, setMyList] = useState();

function callAPIforMyList(){
// logic goes here
}

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

}

以上代码将检查 myList 是否为 undefined 或是否有值。如果 undefined，它将呈现 ActivityIndicator，否则呈现 FlatList。

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

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)/>

希望这有助于阐明您的需求。

每次平面列表数据更改时，如何显示 activity 指示符？

How do I show an activity indicator every time my flatlist data changes?

javascript

activity-indicator

reactjs

react-native

react-native-flatlist