React-native-router-flux: シーンのライフサイクルフックでnavigationBarStyleを動的に設定する

同様に、データに依存するアクションを含むアクションシートをレンダリングするnavBarの動的な右ボタンを使用しようとしています。 考えてください... Follow userABC123 ; Block userABC123 ; など。ライフサイクルフック内（つまり、データがフェッチされた後）にonRight関数を動的に生成して、カスタムアクションシートを作成する方法はありますか？

はい、Actions.refresh（）を介して小道具を更新できます。 例：
Actions.refresh（{renderRightButton：this._renderRightButton}）;
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

@sheparddwは正しいです。 同様に、 navigationBarStyleをActions.refresh({navigationBarStyle ... })更新できます。

Actions.refresh（）呼び出しをどこに置く必要がありますか？
フラックスアクションにリフレッシュ呼び出しを入れると（スタイルに変更が必要なときに呼び出されます）、現在選択されているタブのナビゲーションバースタイルのみが更新されます。 タブを切り替えると、古いスタイルに戻ります。

タブを切り替えるたびに更新されるコンポーネントはタブバーだけなので、タブバーコンポーネントのcomponentWillReceivePropsまたはcomponentWillUpdate更新を入れてみました。 次に、更新されるたびにTabbarが新しい小道具を取得し、再び更新されるため、無限再帰が発生します。

@aksonovこれについてコメントして

コンポーネントでActions.refreshを使用していましたが、これがシーンのプロパティを動的に更新する正しい方法ではないと思います。 これが私の発見です。

//注：Componentを拡張するes6クラスを使用しています

Actions.refresh（{title： 'drawer'}）;を配置した場合コンストラクターで、reactはこれに文句を言います：

警告：setState（...）：既存の状態遷移中（ renderまたは別のコンポーネントのコンストラクター内など）は更新できません。 レンダリングメソッドは、小道具と状態の純粋関数である必要があります。 コンストラクターの副作用はアンチパターンですが、 componentWillMount移動できます。

これは単なる警告であり、望ましい結果が得られます。 ただし、副作用があります。これを行うと、render関数が2回呼び出されます。

これをcomponentWillMount関数に直接配置すると、reactは警告を発行しませんが、renderも2回呼び出されます。

コンストラクターでこれを行う場合：
this.props.navigationState.title = 'test';

その後、reactは文句を言わず、navigationBarのタイトルがテストされます。 renderメソッドは一度だけ呼び出されます。 同じことがonRightTitleなどonRightを呼び出すために行く今、事はこれに応じているhttps://facebook.github.io/react/docs/jsx-spread.html#mutating -props-ある-悪い変異の小道具悪いです。

したがって、悪い小道具を変更するか、Actions.refreshを呼び出して、コンポーネントを2回レンダリングするなどの副作用を持たせることができます...何かアイデアはありますか？

これに関する更新はありますか？ ユーザーの小道具に応じてnavigationBarStyleを動的に設定しようとすると、まったく同じ問題が発生します。 具体的には、ナビゲーションバーの背景色を変更しようとしています。 Actions.refresh({navigationBarStyle ... })機能しません。

<Scene key="myScene"
component={myComponent}
renderTitle={() => { return <NavigationBarTitle title="My Title"/>}}
sceneStyle={styles.scene}
navigationBarStyle={[styles.navBar, this.props.theme.backgroundColor]} <-状態が変化してもbackgroundColorが更新されない
onRight={this.pushNoticeFilter}/>

ナビゲーションバーのカスタムタイトルコンポーネントでさまざまなタイトルとスタイルを動的にレンダリングできましたが、navigationBarStyleは状態の変化をリッスンしていません。

これは、シーンの再レンダリングを無視してRNRFが「キーmySceneはすでに定義されています！」と出力することと関係がありますか？

@ mikaelrosquist @ compojoomサーバーからフェッチした「テーマ」を保存するためにreduxを使用しています。 ラッパーコンポーネントを作成するために動的ナビゲーションバースタイルを実行するために私が見つけた最も簡単な方法。

import React, { Component } from 'react';
import { NavBar } from 'react-native-router-flux';
import Variables from 'market/app/styles/base';

class CircllyNavBar extends Component {
  render() {
    return (
      <NavBar {...this.props} navigationBarStyle={{ backgroundColor: Variables.BRAND_PRIMARY() }} />
    )
  }
}

export default CircllyNavBar;

<Scene key="search_form" title="Search"
    component={SearchForm}
    navBar={CircllyNavBar} />

@OhaiBBQありがとうございます！ 完璧に動作します！ 👍

@mikaelrosquist問題ありません。 私が興味深いと思ったもう1つのことは（Reactを初めて使用するため）、ReactコンポーネントのdefaultPropsクラスプロパティを使用して、RNRFシーンのデフォルトの小道具を設定できることです。

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};