如何在抽屉导航器内的堆栈导航器中通过 backButton 返回

Question

我有多个屏幕，每个屏幕都是一个 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 }
   }

然后我创建 drawerNavigator：

   const DrawerNavigator = createDrawerNavigator(routeConfig, drawerConfig)

   export default createAppContainer(DrawerNavigator)

Answer 1

抽屉导航

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

堆栈导航

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

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

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

• 菜单 > 屏幕 1 > 屏幕 4

然后你可以回去

• 屏幕 4 > 屏幕 1 > 菜单

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

应用程序.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。