javascript - 在加载数据时，如何在react-native 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。

此外，为了使您的应用程序的用户体验更好，您值得花时间考虑在以下场景中要显示的内容:

• 加载数据之前。
• 加载数据时。
• 加载数据后——数据为空。
• 加载数据后 - 数据太多。
• 加载数据后 - 获取失败。