使用React Native,React Navigation和Redux在内容加载内容时显示启动画面的最佳方法是什么?
我目前有一个包含以下内容的Stack Navigator:
-
初始启动画面(SplashScreen)
-
带内容的嵌套Tab导航器(AppNavigator) .
export const RootNavigator = StackNavigator({
Splash: { screen: SplashScreen },
App: { screen: AppNavigator },
}, {
navigationOptions: { header: null},
});
嵌套的Tab Navigator(AppNavigator)具有多个屏幕,可从React Native WebView组件加载内容 .
我希望在WebView组件加载来自各种uri的内容时显示启动画面 . 计划是使用WebView组件的onLoadStart和onLoad方法向Redux发送操作,以触发对AppNavigator的导航重置操作 .
启动画面和主应用程序之间的导航工作正常,但是当启动画面启动且路径未显示在导航状态时,主应用程序中的任何内容都不会加载 .
要加载内容的最佳方法是什么?
用于导航的Redux Reducer:
const initialNavState = RootNavigator.router.getStateForAction(
NavigationActions.init()
);
function NavigationReducer(state = initialNavState, action) {
let nextState = RootNavigator.router.getStateForAction(action, state);
return nextState || state;
}
initialNavState
在运行时:
{
index:0
routes:
Array(1)
0:{routeName: "Splash", key: "Init-id-1504353614126-0"}
}