undefined不是一个函数(在本机应用程序中评估'_this2.closeDrawer()')错误

Question

我是反应原生的初学者.我正在使用NativeBase组件进行设计.当我使用抽屉应用程序给出此错误

undefined is not a function (evaluating '_this2.closeDrawer()')

这是错误的屏幕截图

抽屉代码在这里

import React, { Component } from 'react';
import { Drawer } from 'native-base';
import SideBar from './sidebar';
import Signup from './signup';
import { View } from 'react-native';

export default class NativeDrawer extends Component {
  render() {
    closeDrawer = () => {
      this.drawer._root.close()
    };
    openDrawer = () => {
      this.drawer._root.open()
    };
    return (
      <View>

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

SideBar代码在这里

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

export default class SideBar extends Component {
    render() {

        return (
            <View style={styles.container} >
                <Text>
                    Hello World
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

其他NativeBase组件正在运行,但Drawer发出错误

Answer 1

您设置的道具onClose供你<Drawer>使用的参考组件this.closeDrawer.

这将查找closerDrawer组件的定义,但您已在render方法中定义它.

closeDrawer在Component的范围内定义应该解决你的问题(NB我也已经openDrawer移出了渲染):

export default class NativeDrawer extends Component {
  // Moved outside of render:
  closeDrawer = () => {
      this.drawer._root.close()
  };

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

  render() {

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