使用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"}
}