在本机中获得抽屉导航菜单

Question

当我添加所选代码时，它会显示未定义的对象（评估＆＃39; route.routeName＆＃39;）。 导航抽屉默认位于左侧。如何在右侧获得它？

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import { DrawerNavigator } from "react-navigation";
import ScreenFirst from "./src/ScreenFirst";
import ScreenTwo from "./src/ScreenTwo";

const DrawerExample = DrawerNavigator(
  {
    ScreenFirst: { screen: ScreenFirst },
    ScreenTwo: { screen: ScreenTwo }
  },
  {
    drawerPosition: "right",
    drawerWidth: 100
  }
);
export default DrawerExample;

Answer 1

在 React Navigation 版本 5 中，在 Drawer Navigator 中添加值为 drawerPosition 的 right 道具。

<Drawer.Navigator drawerPosition="right">
  <Drawer.Screen name="Feed" component={Feed} />
  <Drawer.Screen name="Article" component={Article} />
</Drawer.Navigator>

阅读 here 以获取官方文档。

Answer 2

如果您使用的是Navigation 3.x，则需要导入这些人

import {createDrawerNavigator, createAppContainer} from 'react-navigation'

然后尝试这个：

const DrawerExample = DrawerNavigator(
  {
    ScreenFirst: { screen: ScreenFirst },
    ScreenTwo: { screen: ScreenTwo }
  },
  {
    drawerPosition: "right",
    drawerWidth: 100
  }
);

const MyApp = createAppContainer(DrawerExample);
export default MyApp

Answer 3

适用于谁来自React Navigation V5。只需按以下方式致电drawerPosition：

<Drawer.Navigator initialRouteName="SignIn" drawerPosition="right">
    <Drawer.Screen name="welcome" component={Welcome} />
</Drawer.Navigator>