如何在react-navigation 3中使用createDrawerNavigator显示抽屉项目？

Question

在我的React-native项目中，我正在使用一个Drawer导航。为此，我创建了一个名为HomeDrawer的类。这是该代码-

HomeDrawer.js

next_day = 2018-09-26 01:07:00
while True:
      if next_day > 2018-09-26 01:20:00:
          break
        print(next_day)
        next_day += timedelta(minutes=1)

它与react-navigation版本1.0.0-beta.11完美配合。但是更新到版本3后，它显示以下错误-

找不到变量DrawerItem

如果我按以下方式删除标签，那么代码会起作用，但不会显示任何项目作为我包含在DrawerItem中的项目。

2018-09-26 01:07:00
2018-09-26 01:08:00
2018-09-26 01:09:00
2018-09-26 01:10:00
2018-09-26 01:11:00
2018-09-26 01:12:00
2018-09-26 01:13:00
2018-09-26 01:14:00
2018-09-26 01:15:00
2018-09-26 01:16:00
2018-09-26 01:17:00
2018-09-26 01:18:00
2018-09-26 01:19:00
2018-09-26 01:20:00

抽屉切换按钮现在都不起作用。但是，如果我从左向右拖动屏幕，则显示如下图-

现在，我想向后显示抽屉项目并删除第二张图像中标记的工具栏。 因此，如果有人帮助我解决给定代码的问题，那将非常好

Answer 1

如果未安装 react-navigation-drawer ，请尝试如下所示导入 DrawerItems 。

import { DrawerItems } from 'react-navigation-drawer';

Answer 2

发布一部分可以与react-navigation 2.18.2一起工作的示例代码，可以让我的生活更轻松（但不是最简单的...：）。

不确定是否会帮助您，但不会造成任何伤害...
当然，您不能按原样使用代码，但是也许会对您有所帮助。
您可以忽略它，甚至可以要求我删除它，无论您做什么都可以。

AppNavigator.js（从App.js渲染）

import React from 'react';
import { createDrawerNavigator } from 'react-navigation';

import WelcomeAuthNavigator from './WelcomeAuthNavigator';
import MainTabNavigator from './MainTabNavigator';
import MainDrawerNavigator from './MainDrawerNavigator';
import Drawer from '../screens/drawers/Drawer';

export default createDrawerNavigator({
    WelcomeAuth: WelcomeAuthNavigator,
    Drawer: MainDrawerNavigator,
    Main: MainTabNavigator
}, {
  initialRouteName: 'WelcomeAuth',
  contentComponent: props => <Drawer {...props} />,
  drawerWidth: 180
});

WelcomeAuthNavigator.js

import React from 'react';
import { createStackNavigator } from 'react-navigation';

import Welcome from '../screens/welcome/Welcome';
import LoginScreen from '../screens/auth/LoginScreen';
import SignupScreen from '../screens/auth/SignupScreen';

const AuthStack = createStackNavigator({
  Login: { screen: LoginScreen },
  Signup: { screen: SignupScreen }
},  {
    headerMode: 'none',
    initialRouteName: 'Login'
});

const WelcomeAuthNavigator = createStackNavigator({
  Welcome: Welcome,
  Auth: AuthStack
}, {
   headerMode: 'none',
   initialRouteName: 'Welcome',
   contentComponent: props => <Drawer {...props} />
 });

 export default WelcomeAuthNavigator;

MainTabNavigator.js

ContactsStack和PhotosStack是使用createStackNavigator

定义的

const MainTabNavigator = createBottomTabNavigator({
  PhotosStack,
  ContactsStack
}, {
    headerMode: 'none',
    headerStyle: { backgroundColor: '#4C3E54' },
    headerLeft: <Text onPress={() =>
      this.props.navigation.navigate('DrawerOpen')}>Menu</Text>,
    title: 'Welcome!',
    headerTintColor: 'white',
    initialRouteName: 'PhotosStack'
});

export default MainTabNavigator;

MainDrawerNavigator.js

import { createStackNavigator } from 'react-navigation';

import Help from '../screens/drawers/Help';
import About from '../screens/drawers/About';

const MainDrawerNavigator = createStackNavigator({
  Help: { screen: Help },
  About: { screen: About }
}, {
  initialRouteName: 'About'
});

export default MainDrawerNavigator;

Drawer.js

import React from "react";
import { SafeAreaView, View } from "react-native";
import { connect } from 'react-redux';
import { Container, Content, Text, List, ListItem, Left, Right,
  Button, Icon, Body, Thumbnail } from "native-base";

const listItems = [
  { title: "Help", route: "Help", icon: "md-help" },
  { title: "About", route: "About", icon: "ios-information-circle-outline" }
];

class Drawer extends React.Component {

  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Container>
          <Content contentContainerStyle={{
            justifyContent: 'flex-start', marginTop: 30
            }}>
            {this.renderUserPetDetails.bind(this)()}

            <List
              dataArray={listItems}
              renderRow={data => {
                return (
                  <ListItem onPress={() => this.props.navigation.navigate(data.route)} icon>
                    <Left>
                      <Button onPress={() => this.props.navigation.navigate(data.route)}
                        style={{ backgroundColor: "#888" }}>
                        <Icon active name={data.icon} />
                      </Button>
                    </Left>
                    <Body>
                      <Text
                        style={{ fontSize: 14, fontWeight: '600' }}>
                        {data.title}</Text>
                    </Body>
                  </ListItem>
                );
              }}
            />
          </Content>
        </Container>
      </SafeAreaView>
    );
  }
}

Answer 3

您尝试调用DrawerItems而不实际导入它，因此出现错误。确保添加以下行：

import { DrawerItems } from 'react-navigation';