每次我的平面列表数据发生变化时，如何显示活动指示器？

Question

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

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

Answer 1

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

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

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

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

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

这种情况通常不会发生，因为 RNFlatList只会渲染用户在任何给定时间可见的视图，并且当用户滚动列表时不断渲染新视图。不过，可能会出现一些闪烁的问题，您可以参考以下文章：

优化 RN FlatList 的 8 种方法

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

 }

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

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

Answer 2

尝试使用ListEmptyComponent. 所以我假设你的初始状态是{data: {}, loading: false, error: false, success: false}

 <FlatList
 ListEmptyComponent={
   loading ? 
   <ActivityIndicator animating={true} color={colors.blue} />
   :
   <View style={styles.empty}>
      <Text>0 results</Text>
   </View>
 }
 />

每次请求更改数据时，请确保设置loading: true