0

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

我的工具栏.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);

最初单击工具栏没有执行任何操作，并且导航抽屉没有打开，现在我得到了空白屏幕。我在代码中缺少什么？

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

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

4

1 回答 1

1

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

于 2017-08-09T09:19:23.183 回答