如何延迟 Redux Persist Gate 的 SplashScreen？答案

【问题标题】：How to delay SplashScreen of Redux Persist Gate?如何延迟 Redux Persist Gate 的 SplashScreen？
【发布时间】：2018-10-26 15:54:41
【问题描述】：

我正在使用 Redux 和 Redux-Persist 在应用程序关闭时保留一些用户的数据。

您在 PersistGate 中设置了一个名为 loading 的选项，您可以在其中指定一个加载屏幕，该屏幕将在 Redux-Persist 收集持久数据时显示。

问题是这个屏幕出现和消失的太快了，我想看几秒钟。

有没有什么形式可以延迟加载画面的过渡？ 这是我的代码，应用程序的入口点：

class App extends Component {    

  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={ <SplashScreen />} persistor={persistor}>
          <Routes />
        </PersistGate>
      </Provider>
    );
  }
}

【问题讨论】：

标签： react-native redux react-redux redux-persist

【解决方案1】：

不知道这是否完全符合您的需求，但也许您可以使用以下解决方法，使用事件 onBeforeLift 在门提升之前调用一个操作，以设置具有固定超时的条件渲染。

class App extends Component {    

  state = {
    gateLifted: false
  }
  
  onBeforeLift = () => {
    // Take an action before the gate lifts
    setTimeout(() => { 
      this.setState({ gateLifted: true}) 
    }, 3000);
  }

  render() {
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor} onBeforeLift={this.onBeforeLift}>
          { this.state.gateLifted ? <Routes /> : <SplashScreen />}
        </PersistGate>
      </Provider>
    );
  }
}

【讨论】：

谢谢，我试试

【解决方案2】：

对于其他想要这样做的人，你可以使用这个：

class App extends Component {    
  render() {
    return (
      <Provider store={store}>
        <PersistGate
          loading={<SplashScreen />}
          persistor={persistor}
          onBeforeLift={() => new Promise(resolve => setTimeout(resolve, 3000))}
        >
          <Routes />
        </PersistGate>
      </Provider>
    );
  }
}

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。