React Native - FlatList 加载图像时的活动指示器答案

【问题标题】：React Native - Activity Indicator while FlatList loads imagesReact Native - FlatList 加载图像时的活动指示器
【发布时间】：2018-03-22 04:22:07
【问题描述】：

每当我的应用挂载时，我都会设置：

constructor(props) {
    super(props);
    this.state = {
        loading: true
    };
}

我有一个活动指示器，它在 loading: false 之前一直显示：

{this.state.loading &&
    <View style={styles.loading}>
         <ActivityIndicator color="red" animating={this.state.loading} />
    </View>
}

我尝试在FlatList 的文档中搜索一种方法，该方法会告诉我是否所有项目都已呈现，因此我可以调用this.setState({loading: false}); 但是，我没有设法找到这种方法。

有谁知道如何在列表加载数据时显示我的活动指示器？

【问题讨论】：

标签： react-native loading activity-indicator

【解决方案1】：

您的问题与本机反应无关。这就是为什么您在 react native 文档中找不到任何帮助的原因。

假设您的数据是异步传入的，并且参考您的问题，您无法确定此异步操作何时结束。

使用 promises 或 async await 或任何其他类似的功能来确定此异步操作何时结束，然后使用 setState 禁用活动指示器，然后显示 flatList。

如果您需要对上述内容进行更多解释或澄清，请告诉我。

【讨论】：

好的，谢谢。我在异步操作结束后调用了 setState，它成功了。再次感谢您。