堆栈操作重置导致升级到反应导航 4.x 后出现问题

Question

>我在反应导航 3.x 中有以下导航设置

const AuthStack = createStackNavigator(
{
Starter: {
screen: Starter,
},
SignIn: {
screen: Signin,
},
SignUp: {
screen: Signup,
},
ForgotPassword: {
screen: ForgotPassword,
},
SignUpSuccess: {
screen: RegisterSuccess,
},
ForgotPasswordSuccess: {
screen: ForgotPasswordSuccess,
},
},
{
initialRouteName: 'Starter',
headerMode: 'none',
},
);
const HomeStack = createStackNavigator(
{
HomeScreen,
},
{
headerMode: 'none',
},
);
const TabStack = createBottomTabNavigator(
{
Home: HomeStack,
....
},
{
initialRouteName: 'Home',
headerMode: 'none',
}
}
const MainNavigator = createStackNavigator(
{
TabStack,
...commonStack,
},
{
headerMode: 'none',
mode: 'modal',
},
);
const AppNavigator = createSwitchNavigator(
{
Auth: AuthStack,
App: MainNavigator,
},
{
initialRouteName: 'Auth',
},
);
const AppContainer = createAppContainer(AppNavigator);

在成功登录期间，我正在执行以下操作来重置

const resetAction = StackActions.reset({
index: 0,
key: null, // using a nested router you'll also need to set key to null otherwise it'll keep looking into currently active navigator.
actions: [NavigationActions.navigate({routeName: 'TabStack'})],
});
this.props.navigation.dispatch(resetAction);

但是现在我升级到反应导航 4.x，但是当我运行上面的重置代码时，它给了我异常。可能是什么问题？

Error: There is no route defined for key TabStack. Must be one of: 'Starter','SignIn','SignUp','ForgotPassword','SignUpSuccess','ForgotPasswordSuccess'
This error is located at:
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (at SceneView.js:9)
in SceneView (at SwitchView.js:12)
in SwitchView (at createNavigator.js:80)
in Navigator (at createAppContainer.js:430)
in NavigationContainer (at main.js:38)
in RCTView (at main.js:37)
in RCTView (at Root.js:14)
in Root (at connectStyle.js:392)
in Styled(Root) (at main.js:36)
in Main (created by ConnectFunction)
in ConnectFunction (at App.js:91)
in ErrorBoundary (at App.js:90)
in Provider (at App.js:89)
in App (at renderApplication.js:40)
in RCTView (at AppContainer.js:101)
in RCTView (at AppContainer.js:119)
in AppContainer (at renderApplication.js:39)

Answer 1

与其传递key:null不如尝试发送key:undefined

const resetAction = StackActions.reset({
index: 0,
key: undefined,
actions: [NavigationActions.navigate({ routeName: "TabStack" })]
});
this.props.navigation.dispatch(resetAction);

如果key:undefined传递给重置操作，则它将返回到旧行为。

有关更多信息，您可以阅读此处 https://github.com/react-navigation/react-navigation/issues/5706#issuecomment-511976436