在加载数据时，如何在本机FlatList中呈现isLoading元素

Question

我正在写一个新闻提要，其中FlatList从loadData的后端中获取数据，最后是renderItem。用例和我的代码都是标准的。完整的代码在这里：https://gist.github.com/pgbovine/8910348，在注释部分中，我提供了一个用例。

问题在于获取数据需要花费一些时间，我想在加载数据时呈现一个占位符。当前OneFeed在应用程序加载时不可见，并且在应用程序加载时会“跳入”外观，使所有内容变得非常刺耳。

目前尚不清楚我将如何完成...……因为我无法控制OneFeed.rendreItem何时实际呈现...。

Answer 1

  return this.props.getData ? list : null;

在这里，您可以尝试像这样渲染ActivityIndi​​cator：

  return this.props.getData ? list : <View><ActivityIndicator /></View>;

如果您的ActivitiyIndi​​cator没有显示在中心，则可以向包含的View添加一些样式。

---

稍后添加：

我看到的一种常见做法是，您在从后端获取数据时将加载状态设置为true，完成后将其设置为false。您可以参考加载状态以显示ActivityIndi​​cator。

此外，为了经常改善应用的用户体验，值得您花时间考虑以下情况下的显示内容：

• 加载数据之前。
• 正在加载数据。
• 加载数据后-数据为空。
• 加载数据后-数据太多。
• 加载数据后-提取失败。