React-native-router-flux: Setel navigationBarStyle Secara Dinamis di Kait Siklus Hidup Scene

Demikian pula, saya ingin menggunakan tombol kanan dinamis pada navBar yang membuat Lembar Tindakan dengan tindakan yang bergantung pada data. Pikirkan... Follow userABC123 ; Block userABC123 ; dll. Apakah ada cara untuk menghasilkan fungsi onRight secara dinamis dalam kait siklus hidup (yaitu setelah data diambil) untuk menghasilkan lembar tindakan kustom?

Ya, Anda dapat memperbarui alat peraga melalui Actions.refresh(). Contoh:
Actions.refresh({ renderRightButton: this._renderRightButton });
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

@sheparddw benar. Dengan cara yang sama Anda dapat memperbarui navigationBarStyle dengan Actions.refresh({navigationBarStyle ... }) .

Di mana Anda harus meletakkan panggilan Actions.refresh()?
Ketika saya menempatkan panggilan penyegaran dalam tindakan fluks saya (yang dipanggil ketika harus ada perubahan pada gaya) Itu hanya memperbarui gaya navbar pada tab yang saat ini dipilih. Ketika saya beralih tab, itu kembali ke gaya lama.

Satu-satunya komponen yang diperbarui setiap kali saya beralih tab adalah tabbar saya, jadi saya mencoba meletakkan penyegaran di komponen Tabbar saya di componentWillReceiveProps atau componentWillUpdate . Kemudian saya mendapatkan rekursi tak terbatas karena setiap kali di-refresh, Tabbar mendapat props baru dan refresh lagi.

@aksonov maukah Anda mengomentari ini?

Saya bermain dengan Actions.refresh di komponen saya, tetapi saya tidak berpikir bahwa ini adalah cara yang benar untuk memperbarui properti pemandangan secara dinamis. Berikut adalah temuan saya.

// Catatan: Saya menggunakan kelas es6 yang memperluas Komponen

Jika kita menempatkan Actions.refresh({title: 'drawer'}); di konstruktor, lalu bereaksi mengeluh dengan ini:

Peringatan: setState(...): Tidak dapat memperbarui selama transisi status yang ada (seperti dalam render atau konstruktor komponen lain). Metode render harus merupakan fungsi murni dari props dan state; efek samping konstruktor adalah anti-pola, tetapi dapat dipindahkan ke componentWillMount .

Ini hanya peringatan dan kami mencapai hasil yang diinginkan. Namun ada efek samping - fungsi render dipanggil dua kali saat kita melakukan ini.

Jika kita langsung menempatkan ini di fungsi componentWillMount, maka reaksi tidak mengeluarkan peringatan apa pun, tetapi render juga dipanggil dua kali.

Jika kita melakukan ini di konstruktor:
this.props.navigationState.title = 'test';

kemudian bereaksi tidak akan mengeluh dan judul NavigationBar kami akan diuji. Metode render akan dipanggil sekali saja. Hal yang sama berlaku untuk memanggil onRight, onRightTitle dll. Sekarang masalahnya menurut https://facebook.github.io/react/docs/jsx-spread.html#mutating -props-is-bad mutating props ini buruk.

Jadi, Anda dapat mengubah props yang buruk atau Anda dapat memanggil Actions.refresh dan memiliki efek samping, seperti merender komponen dua kali... Ada ide?

Ada pembaruan tentang ini? Saya mengalami masalah yang sama persis ketika mencoba mengatur navigationBarStyle secara dinamis tergantung pada alat peraga pengguna. Secara khusus saya mencoba mengubah warna latar belakang bilah navigasi. Actions.refresh({navigationBarStyle ... }) juga tidak berfungsi.

<Scene key="myScene"
component={myComponent}
renderTitle={() => { return <NavigationBarTitle title="My Title"/>}}
sceneStyle={styles.scene}
navigationBarStyle={[styles.navBar, this.props.theme.backgroundColor]} <- backgroundColor tidak diperbarui saat status berubah
onRight={this.pushNoticeFilter}/>

Saya telah berhasil merender judul dan gaya yang berbeda secara dinamis di komponen judul kustom saya pada bilah navigasi, tetapi navigationBarStyle tidak mendengarkan perubahan status.

Apakah ini ada hubungannya dengan RNRF yang mengabaikan rendering ulang adegan, di mana ia mencetak "Key myScene sudah ditentukan!"?

@mikaelrosquist @compojoom Saya menggunakan redux untuk menyimpan "tema" yang saya ambil dari server. Cara termudah yang saya temukan untuk melakukan gaya bilah navigasi dinamis hanya dengan membuat komponen pembungkus.

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 Terima kasih! Bekerja dengan sempurna! 👍

@mikaelrosquist Tidak masalah. Satu hal lain yang menurut saya menarik (karena saya baru mengenal React), adalah Anda dapat mengatur props default dari RNRF Scene dengan menggunakan properti kelas defaultProps dari React Component.

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};