react-native - goBack 总是在 react-navigation 中返回主屏幕/第一个屏幕

我正在开发一个应用程序，但返回按钮并没有将我带到后屏幕。

应用程序.js

import React, { Component } from 'react';
import one from './components/test/one';
import two from './components/test/two';
import three from './components/test/three';

import { DrawerNavigator } from 'react-navigation';

const AppNavigator = DrawerNavigator({
    one: {
      screen: one,
    },
    two: {
      screen: two,
    },
    three: {
      screen: three,
    },
  }
);

export default () =>
      <AppNavigator />;

组件/测试/one.js

import React, { Component } from 'react';
import { Button } from 'react-native';

export default class one extends React.Component {
  static navigationOptions = {
    drawerLabel: 'one',
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('two')}
        title="Go to Two"
      />
    );
  }
}

组件/测试/two.js

import React, { Component } from 'react';
import { Button } from 'react-native';

export default class two extends React.Component {
  static navigationOptions = {
    drawerLabel: 'two',
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('three')}
        title="Go to 3"
      />
    );
  }
}

组件/测试/three.js

import React, { Component } from 'react';
import { Button } from 'react-native';

export default class three extends React.Component {
  static navigationOptions = {
    drawerLabel: 'three',
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back to 2"
      />
    );
  }
}

单击“转到 2”=>“转到 3”=>“返回 2”。
在屏幕 3 上，单击“返回 2”总是将我带到 one.js。

如果我将它们组合在一个文件中，它甚至不起作用。

最佳答案

您要么使用了错误的 Navigator comp，要么您的要求不明确。基本上，您想将 StackNavigator 用于您想要的行为。

问题是，DrawerNavigator 用于构建抽屉菜单。如果从左侧滑动，您将看到包含所有屏幕的导航器抽屉，如下图所示。



如果您在屏幕上添加如下所示的按钮，您将看到您的菜单打开。

<Button title="MENU" onPress={() => this.props.navigation.navigate('DrawerOpen')} />

结论是，每当我们使用 DrawerNavigator 时，我们总是回到初始路由，即我们定义为第一项或使用 initialRouteName 的第二个参数的 DrawerNavigator 键的任何内容。

顾名思义，只有 StackNavigator 支持您想要实现的这种堆叠顺序。

您可以做的是在 StackNavigator 的屏幕之一内包装一个新的 DrawerNavigator 。例如:

const AppNavigator = DrawerNavigator({
    drawer1: {
        screen: drawer1,
    }
});

const drawer1 = StackNavigator({
    one: { screen: one },
    two: { screen: two },
    three: { screen: three },
});

关于react-native - goBack 总是在 react-navigation 中返回主屏幕/第一个屏幕，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47094753/