Question

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

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

问题是此屏幕显示并消失得太快，我希望看到它几秒钟。

是否有任何形式可以延迟加载屏幕的转换？ 这是我的代码，是应用程序的入口点：

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

Answer 1

对于其他想要这样做的人，您可以使用以下方法：

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

Answer 2

不知道这是否完全符合您的需求，但是也许您可以使用以下变通办法，使用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>
    );
  }
}

如何延迟Redux Persist Gate的SplashScreen？

2 个答案: