如何在反應原生中添加抽屜？

Question

您好，我有一個簡單的應用程序，我想給他添加一個抽屜我使用 react-navigation 4x 並使用react-navigation-drawer在我的應用程序中實現 Drawer 我在單個 package 中使用它之前使用它，它工作正常但是當我使用新的 package 我收到了這個錯誤

不變違規：不變違規：元素類型無效：需要一個字符串（對於內置組件）或一個類/函數（對於復合組件），但得到：未定義。 您可能忘記從定義組件的文件中導出組件，或者您可能混淆了默認導入和命名導入。

雖然我導出我的屏幕

這是代碼

**navigator.js**

    import React from 'react';
    import {TouchableOpacity, View} from 'react-native';
    import Icon from 'react-native-vector-icons';
    import {createAppContainer, createSwitchNavigator} from 'react-navigation';
    import {
      createDrawerNavigator,
      NavigationDrawerStructure,
    } from 'react-navigation-drawer';
    import {createStackNavigator} from 'react-navigation-stack';
    import ForgetPassword from '../screens/ForgetPassword';
    import Home from '../screens/Home';
    import Splash from '../screens/Splash';

    const AuthStackNavigator = createStackNavigator({
      Authloading: {
        screen: Splash,
        navigationOptions: {
          header: null,
        },
      },
    });

    const HomeStack = createStackNavigator({
      HomeScreen: {
        screen: Home,
        navigationOptions: ({navigation}) => ({
          title: 'Home',
          headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
          headerRight: (
            <TouchableOpacity
              onPress={() => navigation.navigate('Notifications')}
              style={{margin: 10}}>
              <Icon name="ios-notifications" size={28} color="#1DA1F2" />
            </TouchableOpacity>
          ),
        }),
      },
    });

    const DrawerNavigator = createDrawerNavigator({
      HomeDrawer: {
        screen: HomeStack,
        navigationOptions: {
          drawerLabel: 'Home',
          drawerIcon: () => <Icon name="ios-home" size={28} color="#0496FF" />,
        },
      },
    });

    const Navigations = createSwitchNavigator({
      // Authloading: Splash,
      Auth: AuthStackNavigator, // the Auth stack
      App: DrawerNavigator, // the App stack,
    });

    const Navigator = createAppContainer(Navigations);

    export default Navigator;


**Home.js**

    //import liraries
    import React, {Component} from 'react';
    import {StyleSheet, Text, View} from 'react-native';

    // create a component
    class Home extends Component {
      render() {
        return (
          <View style={styles.container}>
            <Text>Home</Text>
          </View>
        );
      }
    }


    //make this component available to the app
    export default Home;


**App.js**

    import React, {Component} from 'react';
    import Navigator from './src/navigations/navigator';
    class App extends Component {
      render() {
        return <Navigator />;
      }
    }

    export default App;

編輯

我只是認為 NavigationDrawerStructure 它是從 react-native-drawer 導出的，所以這是我的錯:)

所以這里的組件名稱為NavigationDrawerStructure

//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
  //Structure for the navigatin Drawer
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{flexDirection: 'row'}}>
        <TouchableOpacity onPress={this.toggleDrawer}>
          <Icon
            name="ios-menu"
            size={40}
            style={{margin: 10}}
            color="#1DA1F2"
          />
        </TouchableOpacity>
      </View>
    );
  }
}

或者只是在 Home 堆棧內的 heder 中添加一個切換按鈕，如下所示

navigationOptions: ({navigation}) => ({
      title: 'Home',
      headerLeft: (
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <Icon
            name="ios-menu"
            size={40}
            style={{margin: 10}}
            color="#1DA1F2"
          />
        </TouchableOpacity>
      )
})

Answer 1

導入無效。 它在react-navigation-drawer中沒有這些對象

import { createDrawerNavigator } from 'react-navigation-drawer';
import NavigationDrawerStructure from 'your file path'

反而

import {
      createDrawerNavigator,
      NavigationDrawerStructure,
    } from 'react-navigation-drawer';