javascript - undefined is not a function (evaluating '_this2.closeDrawer()') error in react native app - Stack O

admin管理员组

文章数量:1410705

I am beginner of react native. I am using NativeBase Components for designing. When I use drawer app giving this error

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

This is screenshot of error

Drawer Code is here

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 code is here

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',
    },
});

Other NativeBase ponents are working but Drawer is giving an error

I am beginner of react native. I am using NativeBase Components for designing. When I use drawer app giving this error

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

This is screenshot of error

Drawer Code is here

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 code is here

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',
    },
});

Other NativeBase ponents are working but Drawer is giving an error

• javascript
• android
• reactjs
• react-native
• native-base

Share Improve this question Follow edited Jun 29, 2017 at 10:24 Pineda 7,59333 gold badges3333 silver badges4747 bronze badges asked Jun 21, 2017 at 14:43 Naveed AheerNaveed Aheer 1,82566 gold badges2727 silver badges4242 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You are setting the prop onClose for your <Drawer> ponent by using a reference to this.closeDrawer.

This will look for the definition of closerDrawer on your ponent but you have defined it within your render method.

Defining closeDrawer in the scope of the Component should fix your issue (N.B. I've also moved openDrawer out of render as well):

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

Most simple: just remove the "this." in front of closeDrawer()

I'm running the same example code and that fixed it for me!

本文标签：