Question

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

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'
        }

      });

openDrawerFromToolbar.js

    '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

     });

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);

最初点击工具栏没有做任何动作，导航抽屉没有打开现在我得到空白屏幕。我在代码中缺少什么？

编辑：我已更新代码，现在我面临这样的错误：“元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。< / p>

我已经检查了其他这样的问题，他们说一些导入或导出是错的我无法找出哪些在我的情况下是错误的，有人可以帮忙吗？

Answer 1

您可以使用原生基地提供的抽屉。它带有工具栏功能，非常易于使用。我在我的一个项目中使用它。 https://docs.nativebase.io/Components.html#Drawer

如何使用ToolbarAndroid实现React原生DrawerLayout？

1 个答案: