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

【问题标题】：How to show drawer items using createDrawerNavigator in react-navigation 3?如何在 react-navigation 3 中使用 createDrawerNavigator 显示抽屉项目？
【发布时间】：2019-04-05 13:57:33
【问题描述】：

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

HomeDrawer.js

import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {
  createAppContainer,
  createStackNavigator,
  createDrawerNavigator,
  createSwitchNavigator
} from "react-navigation";


import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import LoginScreen from '../components/LoginScreen';

import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
import WelcomeScreen from "../WelcomeScreen";

let user_email ='', user_first_name='';

class HomeDrawer extends Component {

  state = {

    loading: true
  }

  static navigationOptions = {
    headerLeft: null
}

  componentDidMount() {
    AsyncStorage.getItem("user_email").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_email = value;
    });

    AsyncStorage.getItem("user_first_name").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_first_name = value;
    });

  }

  async componentWillMount() {
    await Font.loadAsync ({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    });
    this.setState({loading:false});
  }

  render() {
    if(this.state.loading) {
      return(
        <Root>
          <AppLoading/>
        </Root>
      )
    }
    return(
      <MyApp/>
    )

  }
}

const CustomDrawerContentComponent = (props) => (

 <View style={{backgroundColor:"#ffff", height:'100%'}}>

      <ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150,  resizeMode:'cover', backgroundColor:"@aaaa"}}>  
      <Body style={styles.drawerBody}>
        <Image
          style={styles.drawerImage}
          source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
        />
        <View style={styles.drawerHeaderText}>
          <Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
          <Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
        </View>

      </Body>


      </ImageBackground>

      <Content style={{marginTop:30 }}>
      <DrawerItems {...props}/>
    </Content>


  </View>



);

const MyApp = createAppContainer(createDrawerNavigator({
  NoteMeHome:{
    screen: NoteMeHome
  },

  Settings:{
    screen: SettingsScreen
  },



},

{
  initialRouteName: 'NoteMeHome',
  drawerPosition: 'left',
  contentComponent: CustomDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle'
}


));


export default HomeDrawer;

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

找不到变量 DrawerItem

如果我像下面这样删除标签，代码会正常工作，但不会显示任何项目作为我包含在 DrawerItem 中的项目。

  <Content style={{marginTop:30 }}>
  <DrawerItems {...props}/>
   </Content>

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

现在，我想显示抽屉项目并删除第二张图像中标记的工具栏。所以，如果有人帮助我用给定的代码解决问题，那就太好了

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案1】：

我将发布与 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;

抽屉.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>
    );
  }
}

【讨论】：

感谢先生分享这段代码，但作为一个初学者，我很难通过理解你的代码来解决我的问题。如果你能帮我解决我给定的代码，那就太好了。
对不起...没时间了。祝你好运！

【解决方案2】：

如果您没有安装react-navigation-drawer，请尝试导入如下所示的DrawerItems。

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

【讨论】：

【解决方案3】：

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

import { DrawerItems } from 'react-navigation';

【讨论】：

看来这在新版本中是不可能的(2+)