React Navigation redux 导航

Question

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

短版：

如果 redux store 不处于初始状态，则会安装一个屏幕，但不会实际导航到那里。

详细说明：

现在我可以通过 (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

问题是react navigation使用不当引起的

我不得不包装 auth 和主路由器，并在 screenProps 中传递根导航对象。

React Navigation redux 导航

React Navigation redux navigate

reactjs

react-native

redux

react-redux

react-navigation