goBack总是在反应导航中进入主页/第一个屏幕

Question

我正在开发一个应用程序,但是goback按钮没有把我带到后面的屏幕.

App.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"
      />
    );
  }
}

点击"转到两个"=>"转到3"=>"返回2".在屏幕3上,点击"返回2"总是带我到one.js.

如果我将它们组合在一个文件中,它甚至无法工作.

Answer 1

您要么使用错误的Navigatorcomp,要么您的要求不明确.基本上,您希望使用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 },
});