コンポーネントの状態をnavigationOptionsに渡す方法ネイティブで反応する（反応ナビゲーション）

Question

反応するネイティブナビゲーション内のトップバーに状態を渡そうとしています。ここで

は私のコンポーネントがどのように見えるかです：

export default class Main extends Component { 
    constructor() { 
    super() 
    this.state = { 
     value: "" 
    }; 
    } 

    static navigationOptions = { 

    tabBarLabel:() => (
     <View style={styles.container}> 
     <Text style={styles.text}> 
{this.state.value} 
     </Text> 
     </View> 
    ), 
    }; 
} 

私はライン{} this.state.valueにエラーType Error: Cannot read property 'value' of undefinedを受け付けております。私は何か間違っているのですか？

Answer 1

ええ、これはreact-navigationという苦労ポイントの1つです。 staticキーワードは、このオブジェクトがクラスMainの一部であることを示しますが、クラスのインスタンスを実行する必要はありません。だから、あなたがそうのようにそれを呼び出すことができます：

Main.navigationOptions.tabBarLabel() 

これは、あなたがnavigationOptionsオブジェクトのプロパティとして宣言された関数からコンポーネントの状態を参照することができないことを意味します。コンポーネント内からタイトルやラベルを変更する必要がある場合は、navigation.setParams({ foo: ... })をcomponentDidMountなどのライフサイクル機能から呼び出すことができます。

コンポーネントのマウント前に値が定義されていないと、ユーザーにやや遅いように見えるので、できるだけこの種の更新を避けるようにしています。