私は何を間違っているのか分かりません - 機能エラーではありません。

Question

私は何を間違っているのか分かりませんが、コンポーネント内にいくつかの機能があります。しかし、私は小道具としてそれらの機能の1つを渡すことができません、私はthis.nextSceneを受け取る関数ではありません。

は、ここに私のコンポーネントからの抜粋だ、と私は問題を抱えていた場所をコメントしている：

nextScene() { 
    this.refs.navigator.push('browse'); 
    } 

    renderNavigationView() { 
    return (
     <View style={styles.drawer}> 
     <Touchable 
      onPress={this.nextScene()}  //issue here, "this.nextScene is not a function" 
     > 
      <View style={styles.container}> 
      <Text style={styles.title}>Browse</Text> 
      </View> 
     </Touchable> 
     <Touchable> 
      <View style={styles.container}> 
      <Text style={styles.title}>Button</Text> 
      </View> 
     </Touchable> 
     </View> 
    ); 
    } 

    render() { 
    return (
     <DrawerLayoutAndroid 
     ref="drawer" 
     drawerWidth={300} 
     drawerPosition={DrawerLayoutAndroid.positions.Left} 
     renderNavigationView={this.renderNavigationView}> 
     <Navigator 
      ref="navigator" 
      configureScene={(route) => { 
      if (Platform.OS === 'android') { 
       return Navigator.SceneConfigs.FloatFromBottomAndroid; 
      } 
      } } 
      initialRoute={{}} 
      renderScene={this.renderScene} 
      /> 
     </DrawerLayoutAndroid> 
    ); 
    } 

ありがとう！

Answer 1

あなたがレンダリングされているコンポーネントを見てみましょう、とrenderNavigationView小道具にした場合：

renderNavigationView={this.renderNavigationView} 

それは細かいようだが、機能でthisコンテキストはデフォルトでwindowであることから、thisがでwindowを指し、 renderNavigationView。あなたがthis.nextScene()を使用しているので

onPress={this.nextScene()} 

とthisは、あなたが効果的にこのようにエラーを投げて、存在しないwindow.nextSceneをやろうとしている、機能にwindowを参照：あなたのonPressイベントハンドラを考えてみましょう。 （呼び出しであることにも注意してください - 参照ではなく、カッコを削除してください）。

---

私はthis.nextScene.bind(this)を試すのであれば、私はwindow.nextSceneが存在しないため、関数が定義されていないので、これはあるcannot read property 'bind' of undefined

を取得します。この問題を解決するには、両方renderNavigationViewとnextSceneに正しくthisをバインドするFunction.prototype.bindを使用します。

renderNavigationView={this.renderNavigationView.bind(this)} 

このような状況で何bind機能でthisコンテキストを設定されています。ここでthisがクラスを参照しているので、クラスは正しく動作するはずのnextSceneメソッドを実行するために使用されます。あなたはまた、我々はthisがクラス、ないwindowを参照したいnextScenenextScene内部のためにバインドを使用する必要があります。

onPress={this.nextScene.bind(this)} 

Answer 2

冬は彼の答えで指摘bindメソッドを使用する別の方法は、矢印の機能を使用することです

自動的にthisを親コンテキストにバインドします。

class MyComponent extends React.Component { 
    clickHandler = (e) => { 
    // do stuff here 
    } 

    render() { 
    return (
     <button onClick={this.clickHandler}></button> 
    ) 
    } 
}