这是我的项目文件层次结构
RootTabNavigator
| AuthStackNavigator // I want to go back to this navigator
| AuthoScreen
| Welcome Screen
| MainTabNavigator // I want to reset MainTabNavigator
| FeedStacknavigator
| Screen A
| OtherStackNavigatorOne
| Screen E
| OtherStackNavigatorTwo
| Screen D
| MenuStackNavigator
| Menuo <-I'm here and want to reset to 'MainTabNavigator'
and go BACK to 'AuthScreen'
| Screen B
| Screen C
用户在MenuStackNavigator和MainTabNavigator下的Menuo屏幕上。
如果用户没有令牌(用户注销时),用户将返回验证屏幕。
但与此同时我想重置MainTabNavigator 。您可以卸载,执行NavigationActions.init()或其他任何操作。我更喜欢NavigationActions.init()
我只想将MainTabNavigator设置为第一次。
如果没有令牌,我会回到Auth Screen(这是有效的)
This code if the part of Menuo Screen
componentWillReceiveProps(nextProps) {
if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {
const backAction = NavigationActions.back({
key: null
})
nextProps.navigation.dispatch(backAction);
...
(问题)我们如何重置MainTabNavigator,包括子StackNavigators?
MainTabNavigator.js
export default TabNavigator(
{
Feed: {
screen: FeedStacknavigator,
},
OtherOne: {
screen: OtherStackNavigatorOne,
}
...
}, {
navigationOptions: ({navigation}) => ){
header: null,
tabBarIcon: ({focused}) => ...
...
}
我可以将MainTabNavigator从函数更改为类,并处理在那里重置TabNavigator。 (我不确定)。
这一次,我需要一个具体的工作示例。我一直在阅读doc并申请我的应用程序,但我无法解决这个问题。
如果有任何不清楚的地方,请告诉我。
更新
const RootTabNavigator = TabNavigator ({
Auth: {
screen: AuthStackNavigator,
},
Welcome: {
screen: WelcomeScreen,
},
Main: {
screen: MainTabNavigator,
},
}, {
navigationOptions: () => ({
...
}
);
export default class RootNavigator extends React.Component {
componentDidMount() {
this._notificationSubscription = this._registerForPushNotifications();
}
答案 0 :(得分:4)
这在大多数情况下都适用:
componentWillReceiveProps(nextProps) {
if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {
let action = NavigationActions.reset({
index: 0,
key: null,
actions: [
NavigationActions.navigate({routeName: 'Auth'})
]
});
nextProps.navigation.dispatch(action);
}
...
}
或者尝试使用自定义操作增强导航器:
const changeAppNavigator = Navigator => {
const router = Navigator.router;
const defaultGetStateForAction = router.getStateForAction;
router.getStateForAction = (action, state) => {
if (state && action.type === "RESET_TO_AUTH") {
let payLoad = {
index: 0,
key: null,
actions: [NavigationActions.navigate({routeName: "AuthStackNavigator"})]
};
return defaultGetStateForAction(NavigationActions.reset(payLoad), state);
// or this might work for you, not sure:
// return defaultGetStateForAction(NavigationActions.init(), state)
}
return defaultGetStateForAction(action, state);
};
return Navigator;
};
const screens = { ... }
RootTabNavigator = changeAppNavigator(TabNavigator(screens, {
initialRouteName: ...,
...
}));
然后在Menuo Screen
做:
componentWillReceiveProps(nextProps) {
if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {
nextProps.navigation.dispatch({type: "RESET_TO_AUTH"});
...
答案 1 :(得分:2)
您需要将导航器初始化为初始状态。您可以使用NavigationActions.init()
执行此操作。您可以详细了解导航操作here。
您可以通过创建自定义导航操作来完成此操作,详细了解它们here。
这里有一些代码可以帮到你:
// First get a hold of your navigator
const navigator = ...
// Get the original handler
const defaultGetStateForAction = navigator.router.getStateForAction
// Then hook into the router handler
navigator.router.getStateForAction = (action, state) => {
if (action.type === 'MyCompleteReset') {
// For your custom action, reset it all
return defaultGetStateForAction(NavigationActions.init())
}
// Handle all other actions with the default handler
return defaultGetStateForAction(action, state)
}
为了触发自定义导航操作,您必须从React组件中按如下方式调度它:
this.props.navigation.dispatch({
type: "MyCompleteReset",
index: 0
})
答案 2 :(得分:1)
您可以通过扩展路由器来定义自定义导航逻辑。要完成您在问题中的项目文件层次结构中描述的内容,您可以执行以下操作。
MainTabNavigator.js
...
RootTabNavigator.router.getStateForAction = (action, state) => {
if (state && action.type === 'GoToAuthScreen') {
return {
...state,
index: 0,
};
}
return RootTabNavigator.router.getStateForAction(action, state);
};
MainTabNavigator.router.getStateForAction = (action, state) => {
if (state && action.type === 'GoToAuthScreen') {
return {
...state,
index: 0,
};
}
return MainTabNavigator.router.getStateForAction(action, state);
};
MenuStackNavigator.router.getStateForAction = (action, state) => {
if (state && action.type === 'GoToAuthScreen') {
return {
...state,
index: 0,
};
}
return MenuStackNavigator.router.getStateForAction(action, state);
};
在Menuo屏幕文件中
componentWillReceiveProps(nextProps) {
if ( nextProps.token == undefined || _.isNil(nextProps.token) ) {
const goToAuthScreen = () => ({
type: 'GoToAuthScreen',
});
nextProps.navigation.dispatch(goToAuthScreen);
...
}
}