在 React Native 中按下按钮后是否可以显示 10 秒的加载屏幕？答案

【问题标题】：Is it possible to show 10-second loading screen after button is pressed in React Native?在 React Native 中按下按钮后是否可以显示 10 秒的加载屏幕？
【发布时间】：2020-05-15 17:17:56
【问题描述】：

按下 cca 的按钮（直到应用程序从 API 获取数据）时，我需要显示加载屏幕。 10 秒。

是否有可能以及如何做到这一点？

【问题讨论】：

如果您不反对使用模态框，您可以在请求完成时显示模态框吗？一旦您对成功获取数据感到满意，您就可以隐藏模式。
你在使用 redux 吗？那么我可以提出一种可以节省大量时间的方法

标签： android ios reactjs react-native expo

【解决方案1】：

要正确回答这个问题，您确实应该首先了解预期的代码模式 react 的用途（不是必需的，但旨在实现）

这个概念是 Flux 设计模式。

本质上，在不断变化的情况下，您有一些操作会导致视图（反应）将响应或“反应”到存储更改。

为了简单起见，我建议使用 mobx 和 mobx-react 库来帮助促进这种模式。

接下来，您只需为您的按钮创建一个“动作”（一个唯一目的是修改存储的简单方法），例如“loadData”。此操作最初可以在您的商店中设置 loading = true ，您的反应可以对其做出反应并呈现模式以覆盖屏幕并显示加载图形。

然后该动作可以异步加载数据，然后在完成时设置 loading = false 以使您的反应清除加载屏幕。

如果这一切都超出您的想象：研究 Flux，然后研究 mobx。它会很快变得清晰。

【讨论】：

【解决方案2】：

您可以创建显示加载指示器的加载器组件取决于状态变量。

例如创建一个名为 isLoading 的状态变量：

this.state = {
  isLoading: false
}

现在，当您调用 api 来获取数据时，将此状态变量设置为 true：

fetchData = () => {
  this.setState({ isLoading: true });
  axios.get('api_url', { headers: header }).then((res) => {
    this.setState({ data: res.data, isLoading: false });
  }).catch((e) => {
    this.setState({ isLoading: false }, () => {
      // show error here 
    });
  })
}

在您看来，将 Loader 组件放在顶部：

import Loader from '../components/Loader';
...
...
render () {
  return (
    <View style={{flex: 1}}>
      <Loader isLoading={this.state.isLoading} />
      ...
      ...
      // Your others component
    </View>
  )
}

如果要创建Loader组件here是代码。

【讨论】：

【解决方案3】：

您可以使用超时功能等待 10 秒

 fetchData() {
    setTimeout(() => {
       // API or Your Functions to get data
    }, 10000);
 }

【讨论】：