Question

我正在尝试使用https://docs.nativebase.io/Components.html给出的示例代码并使用Exponack编辑代码，以使用NativeBase实现边栏。但是，Snack不喜欢'openDrawer'或'closeDrawer'，并给出错误消息。

我尝试将openDrawer和closeDrawer移动到render函数之外，该函数消除了错误并确实允许加载应用程序。但是，当我使按钮访问openDrawer（）时，它会产生错误“ TypeError：undefined不是对象（正在评估'this.drawer._root'）”。

我尝试注释掉整个渲染函数并粘贴示例代码（用我自己的侧边栏组件替换侧边栏），但是结果相同。

我的App.js：

import React, { Component } from 'react';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, Drawer } from 'native-base';
import {View, StatusBar, StyleSheet} from 'react-native';
import {EventList} from './data/eventsInfo';
import AboutEventMenu from './aboutEventMenu';
import NavSidebar from './navSidebar';
import {Settings} from './global';

export default class BBBApp extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    closeDrawer = () => {
      this.drawer._root.close()
    };
    openDrawer = () => {
      this.drawer._root.open()
    };

    return (
      <Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={<NavSidebar navigator={this.navigator} />}
        onClose={() => this.closeDrawer()} >

        <Container style={styles.main_view}>
          <Header>
              <Left>
              <Button transparent onPress={this.openDrawer()}>
                <Icon name='menu' />
              </Button>
            </Left>
            <Body>
              <Title>{EventList[Settings.SelectedEvent].name}</Title>
            </Body>
            <Right />
          </Header>
          <Content>
            <AboutEventMenu />
          </Content>
        </Container>
      </Drawer>    
    );
  }
}

const styles = StyleSheet.create({
  main_view: {
    paddingTop: StatusBar.currentHeight
  }
});

NativeBase文档中的示例代码：

import React, { Component } from 'react';
import { Drawer } from 'native-base';
import SideBar from './yourPathToSideBar';
export default class DrawerExample extends Component {
  render() {
    closeDrawer = () => {
      this.drawer._root.close()
    };
    openDrawer = () => {
      this.drawer._root.open()
    };
    return (
      <Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={<SideBar navigator={this.navigator} />}
        onClose={() => this.closeDrawer()} >
      // Main View
      </Drawer>
    );
  }
}

NativeBase抽屉示例产生“未定义'closeDrawer'”

0 个答案: