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

然后创建抽屉导航器：

   const DrawerNavigator = createDrawerNavigator(routeConfig, drawerConfig)

   export default createAppContainer(DrawerNavigator)

Answer 1

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

Answer 2

抽屉导航

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

堆栈导航

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

因此，要想向后浏览，至少必须在另一个屏幕上放一个屏幕，因此在使用抽屉导航的初始页面上，您将无法返回。

以上面的示例为例，您不能从 screen1 返回到用户，也不能从 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。

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

2 个答案: