Question

我有一个嵌套在堆栈内的抽屉。无法使用它实现后退按钮。任何人都可以提供一个干净的解决方案来解决这个问题=（

我想在iOS上显示返回按钮，在Android上使用硬件后退按钮导航到最后一个屏幕。

抽屉导航器

/* @flow */

import React from "react";
import { DrawerNavigator } from "react-navigation";

import Home from "./components/home/";
import SplashPage from "./components/splashscreen/";
import SideBar from "./components/sidebar";
import Contact from "./components/Contact/";



const Drawer = DrawerNavigator(
  {
   Home: { screen: Home },
    Contact: { screen: Contact},
  },
  {
    navigationOptions: {
      gesturesEnabled: false
    },
  initialRouteName: "Home",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    drawerPosition: 'right',
    contentComponent: props => <SideBar {...props} />
  }
);



export default Drawer;

Stack Navigator

/* @flow */

import React from "react";

import { Platform } from "react-native";
import { Root } from "native-base";
import { StackNavigator} from "react-navigation";
import Drawer from "./Drawer";
import Contact from "./components/Contact"
import Register from "./components/Register"
import Home from "./components/home/";

const AppNavigator = StackNavigator(
    {
        Drawer: {screen: Drawer},
       Home: { screen: Home },
        Register: {screen: Register},
    },
    {
        initialRouteName: "Home",
           headerMode: Platform.OS == "android" ? "none" : "float",
        header: (navigation) => ({
            left: (
                <Button
                  title="Back"
                  onPress={ () => navigation.goBack() }  
                />
              )
          })
    }
);

export default () =>
    <Root>
        <AppNavigator />
    </Root>;

Answer 1

在调用null这样的函数时，请使用goBack作为参数：

navigation.goBack(null)

抽屉导航器嵌套在堆栈导航器中

1 个答案: