在反应本机应用程序中使用反应导航通过单次按下事件返回两个屏幕答案

【问题标题】：go two screen back with single press event using react-navigation in react native app在反应本机应用程序中使用反应导航通过单次按下事件返回两个屏幕
【发布时间】：2017-05-10 14:41:40
【问题描述】：

我正在使用来自https://reactnavigation.org 的 reactnavigation 组件，并使用下面的代码我将返回一屏

<Button
          onPress={() => goBack()}
          title="Go back from this HomeScreen"
        />

如何在单按操作时返回 2 个屏幕

我正在使用这段代码来初始化导航器

const RouteConfigs = {
    Login: {screen:Login},
    Home: {screen:Home},
    Chat: {screen:Chat},
    Facebook: {screen:Facebook},
    Facebookgallery: {screen:Facebookgallery}    
}

const StackNavigatorConfig = {
    headerMode: 'none',
}

export default StackNavigator(RouteConfigs, StackNavigatorConfig)

我使用此代码从家导航到 Facebook：

() => this.props.navigation.navigate('Facebook', {user:this.state.user})

并使用此代码从 Facebook 到 Facebookgallery：

onPress={ () => this.props.navigation.navigate('Facebookgallery', {user:this.state.user}) }

现在我想用一些参数直接从 Facebookgallery 回到 Home

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

我知道这是一个较老的问题，但我使用的是：

navigation.pop(n);

将您带到堆栈中的上一个屏幕。如果您提供一个数字 n，它将指定将您带回堆栈中的屏幕数。 https://reactnavigation.org/docs/en/navigation-prop.html

【讨论】：

谢谢。最佳答案

【解决方案2】：

你可以使用navigation.pop(screenCount) 以 screenCount 为整数

navigation.pop(2)

仅供参考

https://reactnavigation.org/docs/stack-actions#pop

【讨论】：

【解决方案3】：

React Navigation 更新为不直接使用pop 函数，将dispatch 函数与StackActions 一起使用。

navigation.dispatch(StackActions.pop(2));

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。
这不是一个特殊的答案，只是用 Khadam Ikhwanus 的答案更新，如果你看到这个线程的所有答案，你就会知道；）因为 React Navigation 最近更新为不直接使用 'pop' 功能，但在 StackActions 中使用 'dispatch' 函数。

【解决方案4】：

navigation.navigate({ routeName: SCREEN, key: SCREEN_KEY_A });
navigation.navigate({ routeName: SCREEN, key: SCREEN_KEY_B });
navigation.navigate({ routeName: SCREEN, key: SCREEN_KEY_C });
navigation.navigate({ routeName: SCREEN, key: SCREEN_KEY_D });

现在您在屏幕 D 上，想要返回屏幕 A（弹出 D、C 和 B）。然后你需要提供一个返回 FROM 的密钥：

navigation.goBack(SCREEN_KEY_B)

https://reactnavigation.org/docs/en/navigation-prop.html#going-back-from-a-specific-screen-with-goback

【讨论】：

【解决方案5】：

您可以定义额外的导航操作类型，例如POP_TWO_ROUTES 并像这样覆盖 StackRouter.getStateForAction(passedAction, state)（仅作为示例）：

...
const defaultGetStateForAction = AppNavigator.router.getStateForAction;

AppNavigator.router.getStateForAction = (passedAction, state) => {
  if(state && state.routes && state.routes.length > 2
      && passedAction.type === 'POP_TWO_ROUTES') {
    let routes = state.routes.slice();
    routes.pop();
    routes.pop();

    return {
      index: routes.length - 1,
      routes: routes
    };
  }
  // default behaviour for none custom types
  return defaultGetStateForAction(passedAction, state);
}
...

然后在您的屏幕组件中，您可以执行以下操作：

...
onPress={() => this.props.navigation.dispatch({
  type: 'POP_TWO_ROUTES' 
})}
...

另见https://reactnavigation.org/docs/routers/#Custom-Navigation-Actions。

【讨论】：

【解决方案6】：

目前“正确”的解决方案是：

在您要转到的屏幕之后获取该屏幕的键。在您需要获取 Facebook 屏幕的密钥。
调用 NavigationAction.back(key: 'key-of-previous-screen')，然后它将弹出您的导航堆栈，就像您使用该键在屏幕上一样

我在 thunk 中返回多个屏幕的代码示例（如果您使用 redux，则相关）：

export const postItemAndReturnToMap = item => (dispatch, getState) => {
  const {nav} = getState();

  // Get the key for the screen after/above the root view and use that as reference
  // to return to the root view. This is hardcoded for my stack setup, as you can see
  // there are quite a few nested StackNavigators in my setup
  const {key} = nav.routes[0].routes[0].routes[0].routes[1];

  // Dispatch whatever action you want
  dispatch(postItem(item));

  // This will now go back multiple screens, in my case to the
  // bottom of the top stackNavigator
  return dispatch(NavigationActions.back({key}));
};

这不漂亮。让我们希望 react-navigation 实现类似 .back(2) 的东西，让未来的事情变得更容易。

【讨论】：

【解决方案7】：

如果您使用的是push，那么您可以使用这个进入根屏幕

this.props.navigation.popToTop();

and to Push

this.props.navigation.navigate('SummaryScreen', {
    otherParam: 'anything you want here',
});

【讨论】：

【解决方案8】：

听起来您正在寻找类似#reset (https://reactnavigation.org/docs/navigators/navigation-actions#Reset) 的内容。

我没有使用过这个库，但您可能正试图返回导航堆栈的根屏幕。我用于导航的其他库有某种popToRoot 或类似的东西。

【讨论】：

不，我不能使用它，因为在 root 中我正在使用滚动条，我需要返回到导航起源的同一个滚动条屏幕。它在两个不同的屏幕上执行 onPress={() => goBack()} 2 次时起作用，但我需要它直接返回 2 个屏幕，因为它在手动按下后退按钮时发生
Reset 擦除整个堆栈并重置（重新创建）将驻留在下面的所有视图。如果您要重置的视图很轻且加载速度很快，这可能会起作用，但如果不是，它不会提供良好的用户体验。

【解决方案9】：

试试这个

onPress={() => {
    props.rootNavigation.dispatch(
      NavigationActions.reset({
        index: 0,
        key:null,
        actions: [NavigationActions.navigate({ routeName: 'Home' })]
      })
    )
}}

【讨论】：

【解决方案10】：

这应该可行：

this.props.navigation.pop(2)

【讨论】：