如何回应原生导航v3中的页面

Question

我正在使用expo的标签模板反应原生。

我在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内执行goback操作。但是，在切换导航器中指定了GoalStack和MainTabNavigator。由于切换导航器一次显示一个屏幕，因此您无法在此处执行goback。

如果你想从GoalStack转到MainTabNavigator，你需要使用如下所示

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

Answer 3

试试这个：

this.props.navigation.goBack();