如何延迟 Redux Persist Gate 的 SplashScreen?
How to delay SplashScreen of Redux Persist Gate?
我正在使用 Redux 和 Redux-Persist 在应用程序关闭时保留一些用户数据。
您在 PersistGate 中设置了一个称为加载的选项,您可以在其中指定一个加载屏幕,该屏幕将在 Redux-Persist 收集持久化数据时显示。
问题是这个画面出现和消失的太快了,我想多看几秒。
有什么表格可以延迟加载画面的转换吗?
这是我的代码,应用程序的入口点:
class App extends Component {
render() {
return (
<Provider store={store}>
<PersistGate loading={ <SplashScreen />} persistor={persistor}>
<Routes />
</PersistGate>
</Provider>
);
}
}
不知道这是否完全符合您的需求,但也许您可以使用以下解决方法,使用 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>
);
}
}
对于其他想要这样做的人,您可以使用这个:
class App extends Component {
render() {
return (
<Provider store={store}>
<PersistGate
loading={<SplashScreen />}
persistor={persistor}
onBeforeLift={() => new Promise(resolve => setTimeout(resolve, 3000))}
>
<Routes />
</PersistGate>
</Provider>
);
}
}
我正在使用 Redux 和 Redux-Persist 在应用程序关闭时保留一些用户数据。
您在 PersistGate 中设置了一个称为加载的选项,您可以在其中指定一个加载屏幕,该屏幕将在 Redux-Persist 收集持久化数据时显示。
问题是这个画面出现和消失的太快了,我想多看几秒。
有什么表格可以延迟加载画面的转换吗? 这是我的代码,应用程序的入口点:
class App extends Component {
render() {
return (
<Provider store={store}>
<PersistGate loading={ <SplashScreen />} persistor={persistor}>
<Routes />
</PersistGate>
</Provider>
);
}
}
不知道这是否完全符合您的需求,但也许您可以使用以下解决方法,使用 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>
);
}
}
对于其他想要这样做的人,您可以使用这个:
class App extends Component {
render() {
return (
<Provider store={store}>
<PersistGate
loading={<SplashScreen />}
persistor={persistor}
onBeforeLift={() => new Promise(resolve => setTimeout(resolve, 3000))}
>
<Routes />
</PersistGate>
</Provider>
);
}
}