React nativeのナビゲーションバーから関数を呼び出す方法は？

Question

タイトルをクリックして関数を呼び出す画面を作成しようとしています。 次のコードは、 "未定義は関数（評価_this2._test（）"ではありません）

私はクラスのホームの外で_testを定義すると、関数を呼び出すことができますが、_testはthis.props ）。

また、私はthis._testを使用してレンダリング（）から関数_testを呼び出すことができると思います。

これは「この」の問題であるかもしれないように見えますが、私は把握することはできません何が問題なのですか？助けてもらえますか？

@connect(data => Home.getDataProps(data)) 
export default class Home extends React.Component { 

    static route = { 
    navigationBar: { 
     title: <Text onPress={()=>{this._test()}}>Home</Text> 
    } 
    } 

    _test =() => { 
    console.log("TEST SUCCESS") 
    console.log(this.props) 
    } 
... 

Answer 1

それは、クラスのインスタンスではなく、クラス自体に属するのstaticオブジェクト（このページの静的メソッドの詳細：MDN static）からメソッドを呼び出そうとしているからです。たぶん、test()メソッドを静的に変更する必要があります。静的メソッドから非静的メソッドを呼び出すことはできませんが、逆の方法で静的メソッドをインスタンスから呼び出すことはできます。

さらに、<Text />コンポーネントは、お客様の<Home />コンポーネント内にレンダリングされていません。それはなぜ静的なオブジェクトです。そして、なぜあなたはthis演算子によって<Home />コンポーネントメソッドにアクセスできないのですか。 Thisオペレータがコンポーネントではなくrouteオブジェクトを指しています。レンダリングが必要なコンポーネントを一覧表示するための設定です。

たとえば、還元アクションを使用してcomponent to component通信を確立することができます。

私はあなたが達成しようとしているかどうかはわかりませんが、<Text />コンポーネントを押しながら還元アクションをディスパッチできる<Text />ではなく、独自のコンポーネントを使用することをお勧めします。たとえば：

... 
import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import onTextPress from './redux/actions' 
... 

class MyText extends Component { 

    render() { 
    return (
     <Text onPress={() => this.props.onTextPress()} /> 
    ) 
    } 
} 

export default connect(null, { onTextPress })(MyText) 

そしてもちろん変化に対応するために再来にご<Home />コンポーネントを接続するには、Reduxの店で発生しました。

EDIT：あなたの新しい、カスタムコンポーネントを使用するようにstatic routeオブジェクトを変更する必要があなたの家のコンポーネントで ：

... 
import MyText from './components/MyText' 
... 

export default class Home extends React.Component { 

    static route = { 
    navigationBar: { 
     title: <MyText /> 
    } 
    } 
... 

これは、あなたが任意のアクションを派遣することができます（私の例ではonTextPressアクション）ナビゲーション内からバー。