Как отложить SplashScreen в Redux Persist Gate? - PullRequest
Новая
       28

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

0 голосов
/ 26 октября 2018

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

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

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

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

class App extends Component {    

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

1 Ответ

0 голосов
/ 27 октября 2018

Не знаю, будет ли это полностью соответствовать вашим потребностям, но, возможно, вы можете использовать следующий обходной путь, используя событие 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>
    );
  }
}
...