Question

我在expo react native上使用标签模板。

我在AppNavigator.js中有一个导航

import React from 'react';
import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';

import MainTabNavigator from './MainTabNavigator';
import GoalScreen from '../screens/GoalScreen';

const GoalStack = createStackNavigator({
  Goal: GoalScreen
})

export default createAppContainer(createSwitchNavigator({
  // You could add another route here for authentication.
  // Read more at https://reactnavigation.org/docs/en/auth-flow.html
  Main: MainTabNavigator,
  Goal: GoalStack
}));

当我点击目标时，我会进入该页面。但是在目标屏幕中，我想按一下“后退”按钮返回。

<Left>
                    <Button hasText transparent onPress={() => {
                        this.props.navigation.goBack(null);
                    }} >
                        <Text>Cancel</Text>
                    </Button>
                </Left>

但是由于某些原因无法正常工作。

Answer 1

在切换导航器中，您必须直接切换导航，

例如：

this.props.navigation.navigate("Main");

如果从一个屏幕推到另一个屏幕（在堆栈导航中），则可以使用“ goBack”功能。

Answer 2

工作正常，没有以前的堆栈可以退回。

SwitchNavigator的目的是一次只显示一个屏幕。默认情况下，它不处理后退操作，当您离开时，它将路由重置为默认状态

https://reactnavigation.org/docs/en/switch-navigator.html

如果您有多个屏幕，则可以在GoalStack中执行回退操作。但是，GoalStack和MainTabNavigator都在开关导航器中指定。由于开关导航器一次只显示一个屏幕，因此您不能在此处执行返回。

如果要从GoalStack转到MainTabNavigator，则需要使用以下内容

this.props.navigation.navigate（“ Main”）

Answer 3

尝试一下：

this.props.navigation.goBack();

如何在React Native Navigation v3中返回页面

3 个答案: