Как отложить SplashScreen в Redux Persist Gate?

Question

Я использую Redux и Redux-Persist для сохранения данных некоторых пользователей при закрытии приложения.

Есть опция загрузки, которую вы настроили в PersistGate, где вы можете указать экран загрузки, который будет отображаться, пока Redux-Persist собирает постоянные данные.

Проблема в том, что этот экран появляется и исчезает слишком быстро, и я хотел бы увидеть его на пару секунд.

Есть ли какая-нибудь форма для задержки перехода экрана загрузки? Вот мой код, точка входа в приложение:

class App extends Component {    

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

Answer 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>
    );
  }
}

Answer 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>
    );
  }
}