Question

我想知道当redux存储导航状态时导航应该如何发生。

简短版：

如果redux存储未处于初始状态，则会安装一个屏幕而不会实际导航。

详细说明：

现在我可以通过（1）使用父导航器（在我的情况下为StackNavigator）或（2）调度动作提供的导航道具进行导航。

1：this.props.navigation.navigate('main')

2：this.props.navigateToMainAction()

减速器：

const INIT_STATE = Nav.router.getStateForAction(
    NavigationActions.navigate({ routeName: 'login' })
);
const navReducer = (state = INIT_STATE, action) => {
    const newState = Nav.router.getStateForAction(action, state);
    return newState || state;
};

导航结构：

const authStack = StackNavigator({
    login: { screen: LoginScreen }
    ,forgottendPassword: { screen: LoginScreen }
}, {
    initialRouteName: 'login'
    ,headerMode: 'none'
});

const homeDrawer = DrawerNavigator({
    home: {
        screen: HomeScreen
        ,navigationOptions: { drawerLockMode: 'locked-closed' }
    }
}, {
    drawerPosition: 'right'
    ,drawerWidth: 300
    ,contentComponent: props => <HomeDrawerMenu {...props} />
});

const mainStack = StackNavigator({
    homeDrawer: {
        screen: homeDrawer
        ,navigationOptions: ({ navigation }) => ({
            header: <HomeMenu navigate={navigation.navigate} />
        })
    }
    ,partnerList: {
        screen: PartnerListScreen
        ,navigationOptions: ({ navigation }) => ({
            header: <PartnerListMenu navigation={navigation} />
        })
    }
}, {
    initialRouteName: 'homeDrawer'
});

const Nav = StackNavigator({
    auth: { screen: authStack }
    ,main: { screen: mainStack }
}, {
    initialRouteName: 'auth',
    headerMode: 'none',
});

当我尝试从auth/login导航到main并从那里导航到main/partnerList它只能正常工作，如果redux存储处于初始状态（在我清除之后）异步存储）。

但是当我重新加载应用程序时，它会挂载main/partnerList组件，而不会实际导航到那里，并且由于这一点，也会调用获取partnerList comp。数据的操作。

加载时的预期行动顺序：

@@INIT
Offline/STATUS_CHANGED
persist/REHYDRATE
check_token <- Check if the user is logged in (in this case he is)
check_token_commit
Navigation/NAVIGATE <- The user is forwarded to main, when he is logged in
Navigation/NAVIGATE <- The user goes to the partnerList component
fetch_partner_list <- Action for fetching the partner list
Offline/BUSY
fetch_partner_list_commit

加载时的当前操作顺序：

@@INIT
Offline/STATUS_CHANGED
persist/REHYDRATE
check_token <- Check if the user is logged in (in this case he is)
fetch_partner_list <- It's already fetching, but no navigate action was triggered yet
Offline/BUSY
check_token_commit
Navigation/NAVIGATE <- The user is forwarded to main, when he is logged in
Navigation/NAVIGATE <- The forwarding happens twice, for some reason
fetch_partner_list_commit
Navigation/NAVIGATE <- The user goes to the partnerList component
fetch_partner_list <- The only time it should be triggered
Offline/BUSY
fetch_partner_list_commit

Answer 1

问题是由于反应导航的使用不当造成的。

我必须包装auth和主路由器，然后在screenProps中向下传递根导航对象。

React Navigation redux导航

1 个答案: