undefined не является объектом (оценивает _this2_.drawer.open) при использовании ref prop

Question

Я пытался заставить работать реактивный ящик с помощью ref prop, как предложено в этих документах, но я получаю следующую ошибку: 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

Вы не можете использовать "это" внутри обратных вызовов. Вы должны определить методы в вашем классе и затем вызывать их.

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