未定義は関数ではありません（ '_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> 
    ); 
    } 
} 

サイドバーコードはこちられる

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コンポーネントが動作しているが、引き出しは、あなたがthis.closeDrawerへの参照を使用して<Drawer>コンポーネントの小道具onCloseを設定しているエラーに

Answer 1

を与えています。

これはあなたのコンポーネントにcloserDrawerの定義を探しますが、あなたはあなたのrender方法以内にそれを定義しています。

あなたの問題を解決する必要があるコンポーネントの範囲にcloseDrawerの定義（N.B.を私はまた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> 
    ); 
    } 
} 

Answer 2

はほとんどシンプル：ちょうど削除「これを。」 closeDrawer（）の前にあります。

私は同じサンプルコードを実行しており、それを修正しました！