使用ref prop时，未定义不是对象(计算_this2_.drawer.open)

Question

我一直试图使用ref prop按照建议的 by these docs让react-native-drawer工作，但我得到了以下错误：undefined is not an object (evaluating _this2_.drawer.open)我已经梳理了堆栈溢出的类似问题，很难将这个错误文本与任何一个问题联系起来，为什么会发生这种情况？

import React, { Component } from 'react';
import Drawer from 'react-native-drawer'
import {
   AppRegistry,
   StyleSheet,
   Text,
   View,
   Button
 } from 'react-native';


 class Project extends Component {
   closeDrawer = () => {
     this._drawer.close()
   };
   openDrawer = () => {
    this._drawer.open()
   };
   render () {
      return (
       <Drawer
         ref={(ref) => this._drawer = ref}
         content={<Menu
                    close={this.closeDrawer()}
                    />}
          >
        <Main
          open={() => {this.openDrawer()}}
          />
        </Drawer>
      )
    }
  }

  class Menu extends Component {
    render() {
      return (
        null
      );
    }
  }

  class Main extends Component {
    render() {
      return (
      <View>
         <Button
           title='Open'
           onPress={this.props.open}
           />
       </View>
     )
   }
 }
 AppRegistry.registerComponent('Project', () => Project); 

Answer 1

不能在回调中使用'this‘。您应该在类中定义方法，然后调用它们。

  closeControlPanel = () => {
    this._drawer.close()
  };
  openControlPanel = () => {
    this._drawer.open()
  };

然后像这样的东西

<Drawer
     ref={(ref) => this._drawer = ref}
     content={<Menu
                close={this.closeControlPanel()}
                />}
      >
    <Main
      open={() => {this.openControlPanel()}
      />
    </Drawer>

另外，

class Main extends Component {
    render() {
      return (
      <View>
         <Button
           title='Open'
           onPress={this.props.open}
           />
       </View>
     )
   }
 }