ヘッダーボタン内のカスタム関数がネイティブに反応する

Question

反応ナビゲーションヘッダーのカスタムボタンの中でカスタム関数を呼び出そうとしています。私はこれを行うには、いくつかの方法を中心に見てきた、と私が見つけた最良の結果は、関数が静的作って、それは次のようになります。

export class MyClass extends React.Component{ 
    static navigationOptions = ({navigation}) => ({ 
     headerRight: (<Button title='press me' onPress={()=> MyClass.SomeFunction() } ></Button>) 
    }); 
    static SomeFunction(){ 
     /*Some code here*/ 
    } 
    /*Some extra code here*/ 
} 

私の問題は、私は内のいくつかの状態のプロパティにアクセスする必要があること、しかし、ですSomeFunction()と、ご存知のとおり、静的関数内のthisにアクセスすることはできません。

スタティック内のコンポーネントの状態にアクセスする方法はありますか？または、ヘッダーのボタン内にカスタム機能を実装する方法がありますか？

Answer 1

代わりのソリューションとして、ナビゲータの状態を設定して値を取得するように設定することができます。

あなたのナビゲーション構造のルートとしてAppWithNavigation状態の親を使用している場合は、以下のような子要素にnavigation小道具を渡すべきである：

render() { 
    const { dispatch, nav, } = this.props 
    return (
     <AppNavigator 
      navigation={addNavigationHelpers({ 
       dispatch: dispatch, 
       state: nav, 
      })} 
     /> 
    ) 
} 

もしそうなら、単に次の行を使用して値を設定

this.props.navigation.state.someValue 

：あなたは以下のようにいつでも

this.props.navigation.setParams({someValue: 'Value'}) 

は、その後、あなたの設定値を取得します

それとも

const { someValue } = this.props.navigation.state 

しかし、最初のコンポーネントの状態をレンダリングする際にnullまたは未定義であってもよいし、覚えておいてください。だから、その取得しようとする前に、既存のチェックする必要があります：すべてのルートは、自身の状態オブジェクトを有しているへ

if (!this.props.navigation.state) { 
    return null 
} 

const someValue = this.navigation.state.someValue 

if (someValue) { 
    /* you can use your someValue here! */ 
} 

注意を。画面が変更されると、this.props.navigation.stateオブジェクトの状態が変更されます。グローバルな解決策が必要な場合はReduxを使用すると思います。

Answer 2

コードを使いこなしてから、自分のニーズに合った解決策を見つけました。誰かを助ける場合は、私はそれを下に掲載します。あなたの貢献に感謝します。D

export class MyClass extends React.Component{ 
    static navigationOption = ({navigation}) => ({ 
     headerRight: (<Button title='Press Me!' onPress={() => MyClass.SomeFunc() }) 
    }) 

    //The function 
    static SomeFun(){ 
     alert(MyClass.SomeState.abc) 
    } 

    //Static functioning as state 
    static SomeState = { 
     abc: 'def' 
    } 
}