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



我在堆栈内嵌套了一个抽屉。无法使用它来实现返回按钮。任何人都可以提供干净的解决方案来解决此=(

我想在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导航器

/* @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>;

当调用 goBack函数时,请使用 null作为参数:

navigation.goBack(null)

相关内容

  • 没有找到相关文章

最新更新