React native 如何使用Android实现React本机抽屉布局？

我尝试在工具栏中单击菜单图标时实现导航抽屉，我尝试了很多天，但我在网上找不到任何好的资源，我遵循了一些堆栈溢出的答案，并实现了这一点，直到现在：

MyToolbar.js

    'use strict';

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

    var ToolbarAndroid = require('ToolbarAndroid');

    export default class MyToolbar extends Component  {
    render() {
      // var navigator = this.props.navigator;
       return (
        <ToolbarAndroid
         title={this.props.title}
         navIcon={require('./ic_menu.png')}
         style = {styles.toolbar}
         titleColor={'white'}
         onIconClicked={this.props.sidebarRef}/>
        );
     }
     }

     const styles = StyleSheet.create({
       toolbar: {
            height: 56,
          backgroundColor: '#08AE9E',
        width: 370,
        alignItems: 'center'
        }

      });

    'use strict';

    import React, { Component } from 'react';
    import {
      StyleSheet,
      View,
      Text,
      DrawerLayoutAndroid,
      ScrollView,
    } from 'react-native';

    var ToolbarAndroid = require('ToolbarAndroid');
    var MyToolbar = require('./MyToolbar');

    export default class OpenDrawerFromToolbar extends Component  {
     render() {

      var navigationView = (
         <ScrollView>
      <View style = {{height:100, backgroundColor:'blue', justifyContent:'center'}}>
         <Text style = {{height:25, color:'white', fontSize:25, marginLeft:20}}>Welcome To ReactNative</Text>
      </View>
      // <ListView></ListView>
           //render your list items
      </ScrollView>
    );

    return (
      <DrawerLayoutAndroid
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => navigationView}
        ref={'DRAWER'}>
        <MyToolbar style={styles.toolbar}
            title={'Calendar'}
            sidebarRef={()=>this._setDrawer()}/>

      </DrawerLayoutAndroid>
    );
    }

     _setDrawer() {
       this.refs['DRAWER'].openDrawer();
      }
     }

     const styles = StyleSheet.create({
       //your own style implementation

     });

“严格使用”；
从“React”导入React，{Component}；
进口{
样式表，
看法
文本
}从“反应本机”；
var ToolbarAndroid=require（'ToolbarAndroid'）；
导出默认类MyToolbar扩展组件{
render（）{
//var navigator=this.props.navigator；
返回(
);
}
}
const styles=StyleSheet.create({
工具栏：{
身高：56，
背景颜色：“#08AE9E”，
宽度：370，
对齐项目：“中心”
}
});

openDrawerFromToolbar.js

    'use strict';

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

    var ToolbarAndroid = require('ToolbarAndroid');

    export default class MyToolbar extends Component  {
    render() {
      // var navigator = this.props.navigator;
       return (
        <ToolbarAndroid
         title={this.props.title}
         navIcon={require('./ic_menu.png')}
         style = {styles.toolbar}
         titleColor={'white'}
         onIconClicked={this.props.sidebarRef}/>
        );
     }
     }

     const styles = StyleSheet.create({
       toolbar: {
            height: 56,
          backgroundColor: '#08AE9E',
        width: 370,
        alignItems: 'center'
        }

      });

    'use strict';

    import React, { Component } from 'react';
    import {
      StyleSheet,
      View,
      Text,
      DrawerLayoutAndroid,
      ScrollView,
    } from 'react-native';

    var ToolbarAndroid = require('ToolbarAndroid');
    var MyToolbar = require('./MyToolbar');

    export default class OpenDrawerFromToolbar extends Component  {
     render() {

      var navigationView = (
         <ScrollView>
      <View style = {{height:100, backgroundColor:'blue', justifyContent:'center'}}>
         <Text style = {{height:25, color:'white', fontSize:25, marginLeft:20}}>Welcome To ReactNative</Text>
      </View>
      // <ListView></ListView>
           //render your list items
      </ScrollView>
    );

    return (
      <DrawerLayoutAndroid
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => navigationView}
        ref={'DRAWER'}>
        <MyToolbar style={styles.toolbar}
            title={'Calendar'}
            sidebarRef={()=>this._setDrawer()}/>

      </DrawerLayoutAndroid>
    );
    }

     _setDrawer() {
       this.refs['DRAWER'].openDrawer();
      }
     }

     const styles = StyleSheet.create({
       //your own style implementation

     });

“严格使用”；
从“React”导入React，{Component}；
进口{
样式表，
看法
文本
抽屉式抽屉，
滚动视图，
}从“反应本机”；
var ToolbarAndroid=require（'ToolbarAndroid'）；
var MyToolbar=require（'./MyToolbar'）；
导出默认类OpenDroperFromToolbar扩展组件{
render（）{
var navigationView=(
欢迎来到ReactNative
// 
//呈现列表项
);
返回(
导航视图}
ref={'DRAWER'}>
这是。_setDrawer（）}/>
);
}
_setDrawer（）{
this.refs['DRAWER'].openDrawer（）；
}
}
const styles=StyleSheet.create({
//您自己的风格实现
});

index.android.js

    import React, { Component } from 'react';
    import {
      AppRegistry
    } from 'react-native';

    var OpenDrawerFromToolbar = require('./components/OpenDrawerFromToolbar');

    class NewsTrack extends Component {
      render() {

        return (
          <OpenDrawerFromToolbar
       />

        );
      }



    }



    AppRegistry.registerComponent('NewsTrack', () => NewsTrack);

import React，{Component}来自'React'；
进口{
评价学
}从“反应本机”；
var OpenDrawerFromToolbar=require（'./组件/OpenDrawerFromToolbar'）；
类NewsTrack扩展组件{
render（）{
返回(
);
}
}
AppRegistry.registerComponent（'NewsTrack'，（）=>NewsTrack）；

最初点击工具栏并没有做任何动作，导航抽屉也并没有打开，现在我的屏幕变成了空白。我在代码中遗漏了什么

编辑：我已经更新了代码，现在我面临这个错误：“元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：object

---

我查过其他类似的问题，他们说某些导入或导出错误，我无法找出在我的情况下哪些是错误的，有人能帮忙吗？

您可以使用native base提供的抽屉。它带有工具栏功能，非常容易使用。我正在我的一个项目中使用它。

---

其中的边栏是什么？如何创建？你有一个工作示例吗？边栏只是另一个文件，其中包含所有菜单项。抽屉中的所有菜单项都呈现在边栏文件中。是的，我正在我的项目中使用。我将nativebase中的代码复制到index.android.js中，我得到一个空白屏幕{this.drawer=ref；}}content={}>这是抽屉菜单的代码。此外还有关闭和打开抽屉的功能。closeDrawer=（）=>{This.drawer.\u root.close（）}；openDrawer=（）=>{This.drawer.\u root.open（） };