React-native-router-flux: ダイナミックタイトル

作成日 2016年02月19日  ·  23コメント  ·  ソース: aksonov/react-native-router-flux

こんにちは、
素晴らしいモジュールをありがとう-タイトルとナビゲーションバーの状態を動的に変更する方法はありますか?

例えば。
<Route key="UserCredentials" name="UserCredentials" hideNavBar={this.state.UserCredentialsNavBar} component={UserCredentials} initial={ false } title={this.state.title} schema="withoutAnimation" />

次に、状態this.state.UserCredentialsNavBar'true 'または' false 'およびthis.state.title'Sometitle'または 'Some othertitle'を変更するリスナーがあります。

試しましたが、どこにも行きませんでした。

前もって感謝します。
:0)

最も参考になるコメント

aksonovに感謝します。
私はあなたを正しく理解していないかもしれません。
たとえば、タイトルの状態を変更したい場合です。 私は電話します
Actions.refresh({title: 'Some other title'})
私に戻ってきてくれてありがとう。
:0)

全てのコメント23件

Actions.refresh(props)を使用してナビゲーター遷移なしでプロパティを設定するためのサポートを追加しました。試してみてください(バージョン2.3.1)

aksonovに感謝します。
私はあなたを正しく理解していないかもしれません。
たとえば、タイトルの状態を変更したい場合です。 私は電話します
Actions.refresh({title: 'Some other title'})
私に戻ってきてくれてありがとう。
:0)

私の悪い、そのすべてがうまく機能しています。 あなたの助けaksonovをどうもありがとう。 とても有難い。 :0)

タイトルを動的に設定する際のバグのように見える問題が発生しています。 Actions.refreshがすべてのルートに設定し、静的なタイトルを上書きしているようです。

私の場合、マスタールートにタイトルプロップがあり、詳細ルートのタイトルが動的にのみ設定されるマスター/詳細設定があります。 詳細ルートにいてタイトルが変わると、タイトルと戻るボタンの両方が同じテキストに変わります。 マスターに戻ると、動的タイトルは(スキーマタイトルに戻るのではなく)オンのままになります。

私はReactNativeを初めて使用するので、これが仕様によるものかどうかはわかりません...?

ありがとう!

現在そのシーンにいない場合でも、特定のシーンに設定する方法はありますか? すなわち

Actions.refresh({key: 'home', title: 'My new title'})

@greatwitenorth正確なユースケースは何ですか?
たとえば、キーview2を使用してビューに移動している場合は、次のような小道具を使用してタイトルを設定できます。

Actions.view2({ title: 'My New Title' })

私の問題は、タイトルを更新する必要のあるシーンに移動していなかったことです。 画面がユーザーのアドレスを更新しましたが、アドレスが完全に別の画面にタイトルとして表示されました。

@greatwitenorth私は同じ問題に遭遇しました。 タイトルが変更された新しいルートに移動せずにタイトルを変更するにはどうすればよいですか?

OK、私はドキュメントをもっとよく読むべきでした、それは単に
Actions.refresh({title: 'new title'})

@greatwitenorthあなたはまともな解決策を見つけましたか?
状態からタイトルを取得しているので、状態が変化するたびに、特定のビューにその値をタイトルとして持たせたいと思います。 時々、タイトルを変更して戻るボタンを介してナビゲートします。その場合、{title:}パラメーターを定義できない(そして戻るアクションでstate-valueを渡す)ことができないように見えますか、それとも何かが足りませんか?

コンポーネントのライフサイクルメソッドの1つ(またはレンダリング)で更新すると、状態プロパティの変更によりアプリが無限ループに陥る可能性があるため、アプリがクラッシュします。

敬具、

@JeroenNelen同様の問題があり、ComponentDidMountに更新を入れ、Reduxレデューサーで状態を設定することで解決しました-タイトルを変更し、アプリの状態を更新し、更新が更新を読み取るすべてのユーザーアクションにReduxアクションを

つまり、基本的にはComponentDidMountの次のようなものです。

Actions.refresh({title: this.props.state.myapp.myvalue})

@jondbm提案に感謝しますが、別のナビゲーターに切り替えることにしました。

敬具、

@JeroenNelen現在どのナビゲーターを使用していますか? (共有してもかまわない場合)

以下の設定で右ボタンが更新されないのはなぜですか? console.logは新しい値を書き込みますが、正しいタイトルが更新されることはありませんか?

const RouterWithRedux = connect()(Router);

export class App extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    let title = '(' + this.props.basket.length + ')';
    console.log(title);
    return (
      <RouterWithRedux rightTitle={title} onRight={() => alert('All right')}>
        <Scene key="root">
          <Scene key="home" component={Main} title="Main"/>
          <Scene key="page1" component={SomePage} title="SomePage"/>
        </Scene>
      </RouterWithRedux>
    );
  }
}
App.propTypes = {
  dispatch: PropTypes.func.isRequired
};

// Wrap the component to inject dispatch and state into it
export default connect(
  state => {
    return {basket: state.basket.items}
  }
)(App);

@jaynakus右タイトルまたは右ボタン?

タイトル!

カスタムナビゲーションバーを使用することをお勧めします。

@jaynakusは、RouterWithReduxの最上位レベルではなく、rightTitleとonRightをSceneコンポーネントに配置してみてください。これでうまくいく可能性があります。

@jondbmがそれらをルートシーンに配置しても解決しませんでしたが、componentWillReceivePropsでActions.refresh()を呼び出すとうまくいきました;)

const RouterWithRedux = connect()(Router);

export class App extends Component {

  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.basket.length !== nextProps.basket.length) {
      console.log(nextProps.basket.length);
      let title = '(' + nextProps.basket.length + ')';
      Actions.refresh({rightTitle: title});
    }
  }

  render() {
    let title = '(' + this.props.basket.length + ')';
    return (
      <RouterWithRedux>
        <Scene key="root" rightTitle={title} onRight={() => alert('All right')}>
          <Scene key="home" component={Main} title="Main"/>
          <Scene key="page1" component={SomePage} title="SomePage"/>
        </Scene>
      </RouterWithRedux>
    );
  }
}
App.propTypes = {
  dispatch: PropTypes.func.isRequired
};

// Wrap the component to inject dispatch and state into it
export default connect(
  state => {
    return {basket: state.basket.items}
  }
)(App);

これは素晴らしいですが、タイトルが切り替わるときにタイトルをフェードイン/フェードアウトするクリーンな方法はありますか? 私の場合、ユーザーが100pxを超えてスクロールすると、タイトルが切り替わります。 トランジションをフェードアウトするといいでしょう。 乾杯。

@greatwitenorth正確なユースケースは何ですか?
たとえば、キーview2を使用してビューに移動している場合は、次のような小道具を使用してタイトルを設定できます。

`` `js
Actions.view2({title: 'My New Title'})

セットアップファイルでどのようにアクセスできますか?

このような構成の場合:

<Router>
                    <Scene key="root" navBar={NavBar}>
                        <Scene
                            hideNavBar
                            key="login"
                            component={Login}
                            initial
                        />

                        <Scene drawer
                               drawerPosition="right" drawerWidth={300}
                               key="task"
                               contentComponent={DrawerView}
                               drawerIcon={drawerIcon}
                               rightButtonImage="menu"
                               onRight={() => {
                                   Actions.drawerOpen()
                               }} hideNavBar
                        >

                            <Scene key="taskInner"
                                   leftButtonImage="arrow-back"
                                   component={TaskView}
                                   onLeft={() => {
                                       Actions.popTo('tasksList')
                                   }}
                            />
                        </Scene>

                    </Scene>
</Router>

その場合、Actions.task({title: 'My New Title'})またはActions.refresh({title: "My New Title"})は機能しません。 引き出しがあるときにタイトルを設定したり、いくつかのプロパティを送信したりするにはどうすればよいですか?

このページは役に立ちましたか?
0 / 5 - 0 評価