ビューの読み込み時にナビゲーションバーのタイトルを変更する方法

Question

ナビゲーションバーのタイトルを設定するには、値を1つ読み込み、それを使用する必要があります。
私はreact-native-router-fluxを使用していますが、私はreduxも使用しています。
私は言語と火災軽減行動を設定した場所に移動します。
すべてのビューは、新しい状態を受け取り、render()方法で私が呼び出すことができます。

console.log(this.props.language.language) 

これはReduxのを介して設定されます。 そして、私のようなナビゲーションバーのタイトル変更したい：

Actions.refresh({title: I18n.t('main', {locale: this.props.language.language})}) 

をしかし、これはアプリケーションを遅くして動作しません。
renderメソッドではない場合は、どこに置くか分かりません。

Answer 1

renderのメソッドで状態を変更するべきではありません。これにより、状態の変更が無限に繰り返され、レンダリングが再現されます。

代わりに、ライフサイクルメソッドでこれを置く必要があります：コンポーネントがあるときに発生します

componentDidMount() { 
    Actions.refresh(...) 
} 

が最初に取り付けられました。

Answer 2

アプリケーション全体でグローバルにアクセス可能なクロージャに現在の言語を格納することができます。

これにより、コンポーネントのライフサイクル全体にわたって確実に存在するように、コンポーネントのconstructorに言語の状態を設定できます。

// Settings.js 
var Settings = (function() { 
    var language = "EN"; // The default language 

    var getLanguage = function() { 
    return language; 
    }; 
    var setLanguage = function(lang) { 
    language = lang; 
    }; 

    return { 
    getLanguage: getLanguage, 
    setLanguage: setLanguage 
    } 
})(); 

export default Settings; 

あなたは現在の言語を取得し、コンポーネントの状態を設定したい：

import Settings from './Settings'; 
... 
constructor(props) { 
    super(props); 
    this.state = { 
    language: Settings.getLanguage() 
    } 
} 

あなたは現在の言語を設定または変更したいとき：

import Settings from './Settings'; 
... 
Settings.setLanguage('FR'); 

// Do something like reload here? 

Answer 3

もし私があなたの質問を明確に理解しておく必要があります。ライフサイクルライフサイクルの方法componentWillReceiveProps()

componentWillReceiveProps(nextProps){ 
    let { language } = nextProps.language; 
    if (language && language != this.props.language.language) { 
     Actions.refresh({title: I18n.t('main', {locale: language})}) 
    } 
} 

Answer 4

あなたが欠けているのは、あなたのキーがルータ>シーンツリーで定義されているコンポーネントのキーだと思います。

Actions.refresh({key: 'somekey', title: I18n.t('main', {locale: this.props.language.language})}) 

しかし、それだけではなく、私の経験から、卑劣なハックであなたを助けることができます。これは、コンポーネントがすでにマウントされていてもアクションが機能しない場合に検出された回避策です。

アクションをタイムアウトでラップするだけで動作します。この回避策は、もともと、2つのアクションコマンドを連続して実行すると、最初のアクションコマンドが省略されるという事実からインスピレーションを得ました。

Reduxが好きな場合は、componentDidMount(){}またはcomponentWillReceiveProps(){}に入力してください。

setTimeout(() => { 
    Actions.refresh({key: 'somekey', title: I18n.t('main', {locale: this.props.language.language})}, 200); // give him some space! 
}); 

これは本当にうまくいきます。