Question

我正在使用来自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

Answer 1

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

navigation.pop(n);

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

Answer 2

您可以使用navigation.pop(screenCount) 屏幕计数为整数

navigation.pop(2)

这里仅供参考

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

Answer 3

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

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

Answer 4

如果您使用的是push，则可以使用此工具进入根屏幕

this.props.navigation.popToTop();

and to Push

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

Answer 5

听起来你正在寻找#reset（https://reactnavigation.org/docs/navigators/navigation-actions#Reset）的内容。

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

Answer 6

＆＃34;适当＆＃34;解决方案现在是：

在要转到的屏幕后获取屏幕的键。在在你的情况下，你需要获得Facebook屏幕的密钥。
调用NavigationAction.back（键：＆＃39;以前的屏幕键＆＃39;），然后将弹出您的导航堆栈，就像您使用该键在屏幕上一样

我在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)的功能，以便将来更轻松。

Answer 7

试试这个

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

Answer 8

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）。然后，您需要提供一个密钥以返回goBack FROM：

navigation.goBack（SCREEN_KEY_B）

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

Answer 9

这应该有效：

this.props.navigation.pop(2)

使用react-navigation在本机应用程序中使用单个按下事件返回两个屏幕

9 个答案: