は、私は次のコードを持っている機能

Question

内部からのネイティブアクセスthis.propに反応： "たonPress" は "this.about" 呼び出したときに

"undefined is not an object ("evaluating this.props.nav") 

：

module.exports = class Menu extends Component { 

    about() { 
     this.props.nav.push({ 
      component: TestView, 
      title: 'Test View', 
     }); 
    } 

    render() { 
     return (
      <ScrollView 
       scrollsToTop={false} 
       style={styles.menu} 
       navigator={this.props.nav}> 
       <View style={styles.logoContainer}> 
        <Image 
         style={styles.logo} 
         source={{ uri, }}/> 
       </View> 

       <Text onPress={this.about} style={styles.item}>About</Text> 
       <Text style={styles.item}>Account</Text> 
      </ScrollView> 
     ); 
    } 
}; 

を、私は、エラーメッセージが出続けます。私はrender関数内にconsole.logを置いて、this.props.navに値が入っていることが分かりました。この問題はabout（）関数で発生し、なぜその理由がわかりません。

どのような提案が素晴らしいでしょうか？

おかげ

Answer 1

私は特定することはできませんが、これは私にはJavascriptをthis結合の問題のように見えます。 ES6クラス構文で定義されたReactJSコンポーネントでは、not automatically bindthisとなるので、関数の呼び出し方法に応じてJavascriptのrules that vary the value of thisに噛まれています。

あなたはボタンハンドラ設定時に明示的に.bindを使用する必要があります。

<Text onPress={this.about.bind(this)} style={styles.item}>About</Text> 

をabout()機能でthisあなたはハンドラを設定render()機能でthisと同じになるように。

私はコンストラクタで結合したり、ハンドラの "Fat-arrow" functionsを使用してのように、同じ問題を解決するための他の方法を示し a repoを見つけました。

React for webを使用した経験がありますが、この地域でReact Nativeが異なるかどうかはわかりません。

Answer 2

JSF内で.bind(this)を呼び出す必要がないように、メソッド宣言自体を再バインドすることもできます。同じ機能を呼び出すボタンがたくさんある場合に便利です。例えば

：

class Menu extends Component { 
    constructor(props) { 
     super(props); 
     // Replace instance method with a new 'bound' version 
     this.about = this.about.bind(this); 
    } 

// Elsewhere in JSX you don't need to remember to call .bind(this) 
<Text onPress={this.about} style={styles.item}>About</Text>