如何在抽屉导航器内的堆栈导航器中按返回按钮返回答案

【问题标题】：How to go back by backButton in stack navigator that is inside drawer navigator如何在抽屉导航器内的堆栈导航器中按返回按钮返回
【发布时间】：2019-06-25 13:20:11
【问题描述】：

我有多个屏幕，每个屏幕都是 stackNavigator。任何创建的 stackNavigator 都在抽屉内。在每个屏幕中，当按下 stackNavigator 标题的 BackButton 时，屏幕总是导航到 initialRoute 而不是回到最后一个屏幕。

我测试了navigation.goBack() 和 navigation.goBack(null) 和 navigation.goBack() 和 navigation.goBack(this.props.navigation.state.key)}

但这些都不起作用。这是我的代码：

    const MenuScreenNavigator = createStackNavigator({
    Menu: {
        screen: MenuScreen,
        navigationOptions: ({ navigation }) => ({
            headerLeft: (
                <HeaderBackButton
                    tintColor="white"
                    onPress={() => navigation.goBack()}
                />
            )
    }

我有多个屏幕导航器，例如菜单导航器：“加载”、“主页”、...屏幕。在继续我有抽屉导航器：

const drawerConfig = {
    drawerPosition: 'right',
    contentComponent: CustomDrawerContent,
    initialRouteName: "Load"
   }
   const routeConfig = {
    Menu: {
        screen: MenuScreenNavigator,
        navigationOptions: { title: strings.screenName.menu }
    },
    Load: { screen: AuthLoadingScreenNavigator },

    Login: {
        screen: LoginScreenNavigator,
        navigationOptions: {
            drawerLabel: () => null
        }
    },
    User: { screen: UserScreenNavigator }
   }

然后我创建了抽屉导航器：

   const DrawerNavigator = createDrawerNavigator(routeConfig, drawerConfig)

   export default createAppContainer(DrawerNavigator)

【问题讨论】：

标签： react-native react-navigation-stack react-navigation-drawer

【解决方案1】：

抽屉导航

这种导航方法提供了一种通过抽屉直接在不同屏幕之间切换的方法。此滑动抽屉包含指向应用程序不同屏幕的链接。

堆栈导航

这种导航器提供了一种在屏幕之间转换和管理导航历史的方法。单击按钮或链接时，会在旧屏幕之上放置一个新屏幕。这有点像 push on pop of a stack。用户可以通过后退按钮一一返回到之前的屏幕。

因此，为了能够向后导航，您至少必须在另一个屏幕上放置一个屏幕，因此在您使用抽屉导航的初始页面上，您将无法返回。

以上面的例子为例，您不能从 screen1 回到 user，或从 screen2 回到 menu。您必须遵循堆栈导航器流程。例如：

菜单 > screen1 > screen4

然后你就可以回去了

screen4 > screen1 > 菜单

现在我们来看一个上图的真实例子：

App.js

import React, { Component } from 'react';
import { View, Text, TouchableHighlight, Image } from 'react-native';
import { DrawerNavigator, createStackNavigator } from 'react-navigation';

import Menu from './pages/Menu/Menu';
import Screen1 from './pages/Menu/Screen1';
import Screen4 from './pages/Menu/Screen4';

import User from './pages/User/User';
import Screen2 from './pages/User/Screen2';
import Screen5 from './pages/User/Screen5';

import Login from './pages/Login/Login';
import Screen3 from './pages/Login/Screen3';
import Screen6 from './pages/Login/Screen6';

const MenuStack = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      navigationOptions: {
        header: null,
      },
    },
    Screen1: {
      screen: Screen1,
    },
    Screen4: {
      screen: Screen4,
    },
  },
  {
    initialRouteName: 'Menu',
  }
);

const UserStack = createStackNavigator(
  {
    User: {
      screen: User,
      navigationOptions: {
        header: null,
      },
    },
    Screen2: {
      screen: Screen2,
    },
    Screen5: {
      screen: Screen5,
    },
  },
  {
    initialRouteName: 'User',
  }
);

const LoginStack = createStackNavigator(
  {
    Login: {
      screen: Login,
      navigationOptions: {
        header: null,
      },
    },
    Screen3: {
      screen: Screen3,
    },
    Screen6: {
      screen: Screen6,
    },
  },
  {
    initialRouteName: 'Login',
  }
);

export default DrawerNavigator(
  {
    Menu: {
      screen: MenuStack,
    },
    Info: {
      screen: UserStack,
    },
    Login: {
      screen: LoginStack,
    },
  },
  {
    initialRouteName: 'Menu',
  }
);

Menu.js、User.js、Login.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Header from '../../Header';

export default class MenuScreen extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
        }}>
        <Header {...this.props} />
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text style={{ fontWeight: 'bold', fontSize: 22 }}>
            This is Menu Screen
          </Text>
          <Button
            title="Go to Screen1"
            onPress={() => this.props.navigation.navigate('Screen1')}
          />
        </View>
      </View>
    );
  }
}

Screen1.js、Screen2.js、Screen3.js

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

export default class Screen2 extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
        }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text style={{ fontWeight: 'bold', fontSize: 22 }}>
            This is Screen2
          </Text>
          <Button
            title="Go to Screen5"
            onPress={() => this.props.navigation.navigate('Screen5')}
          />
          <Button
            title="Go to Back"
            onPress={() => this.props.navigation.goBack()}
          />
        </View>
      </View>
    );
  }
}

Screen4.js、Screen5.js、Screen6.js

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

export default class Screen4 extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
        }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text style={{ fontWeight: 'bold', fontSize: 22 }}>
            This is Screen4
          </Text>
          <Button
            title="Go to Back"
            onPress={() => this.props.navigation.goBack()}
          />
        </View>
      </View>
    );
  }
}

查看源代码：snack.expo.io/@abranhe/react-navigation。

【讨论】：

【解决方案2】：

嗯，也许可以试试this，或该讨论中提出的其他解决方案之一，看看是否能解决您的问题。

【讨论】：