React Navigation redux navigate



我想知道当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;
};

Nav结构:

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组件的操作。"s数据也被称为。

加载时的预期操作顺序:

@@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

问题是由于react导航的使用不当。

我必须包装auth和主路由器,并在screenProps中传递根导航对象。

相关内容

  • 没有找到相关文章

最新更新