代码之家 › 专栏 › 技术社区 › xiaolingxiao

在react本机flatlist加载数据时,如何在其中呈现is loading元素?

react-native javascript

0

xiaolingxiao · 技术社区 · 7 年前

我正在写一个新闻提要 FlatList 正在从后端获取数据 loadData 完成后, renderItem . 用例和我的代码都是标准的。完整代码如下: https://gist.github.com/pgbovine/8910348 在评论部分,我提供了一个用例。

问题是,获取数据需要一段时间,我希望在加载数据时呈现一个占位符。目前 OneFeed 当应用程序加载时是不可见的,当应用程序加载时,它会“跳”到外观上,使所有东西都非常不和谐。

目前还不清楚我将如何完成这件事…因为我不控制什么时候 OneFeed.rendreItem 实际呈现…

1 回复 | 直到 7 年前

1

Sunki Baek 7 年前

  return this.props.getData ? list : null;

在这里,您可以尝试这样呈现ActivityIndicator:

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

如果ActivitiyIndicator未显示在中间,则可以向包含视图添加一些样式。

稍后添加:

我看到的一个常见做法是,在从后端提取数据时,将加载状态设置为true,并在完成后将其设置为false。您可以参考加载状态来显示活动指示器。

此外,为了让你的应用的用户体验更好,经常花点时间思考一下你将在以下场景中显示什么是值得的: