如何通过抽屉导航器内部的堆栈导航器中的后退按钮返回

Question

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

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

但其中 none 有效。这是我的代码：

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

我有多个屏幕导航器，例如菜单导航器："Load"、"Home"、...屏幕。继续我有抽屉导航器：

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 }
   }

然后我创建 drawerNavigator:

   const DrawerNavigator = createDrawerNavigator(routeConfig, drawerConfig)

   export default createAppContainer(DrawerNavigator)

Answer 1

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

Answer 2

抽屉导航

这种导航方法提供了一种通过抽屉直接在不同屏幕之间切换的方法。此幻灯片抽屉包含 link 应用程序的不同屏幕。

堆栈导航

这种导航器提供了一种在屏幕之间转换和管理导航历史记录的方法。单击按钮或 link 时，新屏幕将置于旧屏幕之上。这有点像堆栈弹出。用户可以通过后退按钮一个一个地返回到之前的屏幕。

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

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

菜单 > 屏幕 1 > 屏幕 4

那你可以回去

屏幕 4 > 屏幕 1 > 菜单

现在让我们跳到一个使用上图的真实示例：

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.

如何通过抽屉导航器内部的堆栈导航器中的后退按钮返回

How to go back by backButton in stack navigator that is inside drawer navigator

react-native

react-navigation-drawer

react-navigation-stack