Javascript 如何在react native中添加抽屉？

你好，我有一个简单的应用程序，我想给他添加一个抽屉。我使用react navigation 4x并使用

react navigation drawer

在我的应用程序中实现抽屉 我以前用过它，把抽屉装在一个单独的包里，效果很好 但是当我使用新软件包时，我得到了这个错误

不变冲突：不变冲突：元素类型无效： 应为字符串（用于内置组件）或类/函数（用于 复合组件）但得到：未定义。你可能忘了出口 您的组件来自定义它的文件，或者您可能已经混合了 启动默认导入和命名导入

虽然我导出了我的屏幕

这是代码

**navigator.js**
从“React”导入React；
从“react native”导入{TouchableOpacity，View}；
从“反应本机矢量图标”导入图标；
从“反应导航”导入{createAppContainer，createSwitchNavigator}；
进口{
createDrawerNavigator，
导航抽屉结构，
}从“反应导航抽屉”；
从“反应导航堆栈”导入{createStackNavigator}；
从“../screens/ForgetPassword”导入伪造密码；
从“../screens/Home”导入主页；
从“../screens/Splash”导入飞溅；
const AuthStackNavigator=createStackNavigator({
授权加载：{
屏幕：飞溅，
导航选项：{
标题：null，
},
},
});
const HomeStack=createStackNavigator({
主屏幕：{
屏幕：主页，
导航选项：（{navigation}）=>({
标题:"家",，
头左：，
头灯：(
navigation.navigate（'Notifications'）}
样式={{margin:10}}>
),
}),
},
});
const pawernavigator=createpawernavigator({
家庭抽屉：{
屏幕：HomeStack，
导航选项：{
抽屉标签：“家”，
付款人：（）=>，
},
},
});
const Navigations=createSwitchNavigator({
//加载：飞溅，
Auth:AuthStackNavigator，//Auth堆栈
App:DrawerNavigator，//应用程序堆栈，
});
const Navigator=createAppContainer（导航）；
导出默认导航器；
**Home.js**
//进口珍品
从“React”导入React，{Component}；
从“react native”导入{样式表、文本、视图}；
//创建一个组件
类Home扩展组件{
render（）{
返回(
家
);
}
}
//使此组件可用于应用程序
导出默认主页；
**App.js**
从“React”导入React，{Component}；
从“./src/navigations/Navigator”导入导航器；
类应用程序扩展组件{
render（）{
返回；
}
}
导出默认应用程序；

编辑 我只是认为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>
    );
  }
}

//所有屏幕的导航抽屉结构
类导航抽屉结构扩展组件{
//抽屉中导航的结构
toggleDrawer=（）=>{
//打开/关闭抽屉的道具
this.props.navigationProps.toggleDrawer（）；
};
render（）{
返回(
);
}
}

或者只需在主堆栈左侧的heder中添加一个切换按钮，如下所示

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

navigationOptions:（{navigation}）=>({
标题:"家",，
左校长：(
navigation.toggleDrawer（）}>
)
})

导入无效。它在

react导航抽屉中没有这些对象

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

相反

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

---

Route.js的路径是什么？

/src/navigations/Route.js请注意，其他堆栈的工作方式与AuthStackNavigator中的createStackNavigator类似。这个

导入Navigator from./src/navigations/Navigator'

be

导入Navigator from./src/navigations/Route

？@Max是的，我的输入错误，但问题仍然存在：（尝试在import语句中用{}封装您的包，例如

import{NewModule}from../the/path/to/file