React-native-router-flux: NavigationBarStyle dynamisch im Lifecycle-Hook einer Szene festlegen

In ähnlicher Weise möchte ich eine dynamische rechte Schaltfläche in der NavBar verwenden, die ein Aktionsblatt mit datenabhängigen Aktionen rendert. Denk nach... Follow userABC123 ; Block userABC123 ; usw. Gibt es eine Möglichkeit, die Funktion onRight innerhalb eines Lebenszyklus-Hooks (dh nachdem Daten abgerufen wurden) dynamisch zu generieren, um ein benutzerdefiniertes Aktionsblatt zu erstellen?

Ja, Sie können Requisiten über Actions.refresh() aktualisieren. Beispiel:
Actions.refresh({ renderRightButton: this._renderRightButton });
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

@sheparddw ist richtig. Auf die gleiche Weise können Sie navigationBarStyle mit Actions.refresh({navigationBarStyle ... }) aktualisieren.

Wo sollten Sie den Actions.refresh()-Aufruf platzieren?
Wenn ich den Refresh-Aufruf in meine Flux-Aktion einfüge (die aufgerufen wird, wenn der Stil geändert werden soll), wird nur der Navbar-Stil auf der aktuell ausgewählten Registerkarte aktualisiert. Wenn ich die Registerkarten wechsle, wird der alte Stil wiederhergestellt.

Die einzige Komponente, die aktualisiert wird, wenn ich die Tabs wechsele, ist meine Tabbar, also habe ich versucht, die Aktualisierung in meiner Tabbar-Komponente in componentWillReceiveProps oder componentWillUpdate . Dann erhalte ich eine unendliche Rekursion, da Tabbar jedes Mal, wenn es aktualisiert wird, neue Requisiten erhält und es erneut aktualisiert wird.

@aksonov würde es dir etwas

Ich habe mit Actions.refresh in meiner Komponente gespielt, aber ich glaube nicht, dass dies der richtige Weg ist, um die Eigenschaften der Szene dynamisch zu aktualisieren. Hier sind meine Erkenntnisse.

// Hinweis: Ich verwende eine es6-Klasse, die Component . erweitert

Wenn wir Actions.refresh({title: 'drawer'}); im Konstruktor, dann reagiere auf Beschwerden damit:

Warnung: setState(...): Kann während eines bestehenden Zustandsübergangs (wie innerhalb von render oder dem Konstruktor einer anderen Komponente) nicht aktualisiert werden. Rendermethoden sollten eine reine Funktion von Requisiten und Zustand sein; Konstruktor-Nebeneffekte sind ein Anti-Muster, können aber nach componentWillMount verschoben werden.

Dies ist nur eine Warnung und wir erzielen das gewünschte Ergebnis. Es gibt jedoch einen Nebeneffekt - die Render-Funktion wird dabei zweimal aufgerufen.

Platzieren wir dies direkt in der Funktion componentWillMount, dann gibt response keine Warnung aus, aber render wird auch zweimal aufgerufen.

Wenn wir dies im Konstruktor tun:
this.props.navigationState.title = 'test';

dann wird sich reagieren nicht beschweren und unser navigationBar-Titel wird getestet. Die render-Methode wird nur einmal aufgerufen. Das gleiche gilt für Aufrufe von onRight, onRightTitle usw. Nun ist die Sache demnach https://facebook.github.io/react/docs/jsx-spread.html#mutating -props-is-bad mutating props is bad.

Sie können also entweder Requisiten mutieren, was schlecht ist, oder Sie können Actions.refresh aufrufen und Nebenwirkungen haben, wie z. B. das zweimalige Rendern der Komponente ... Irgendwelche Ideen?

Irgendwelche Updates dazu? Ich habe genau das gleiche Problem beim Versuch, navigationBarStyle dynamisch abhängig von den Benutzereigenschaften festzulegen. Insbesondere versuche ich, die Hintergrundfarbe der Navigationsleiste zu ändern. Actions.refresh({navigationBarStyle ... }) funktioniert auch nicht.

<Scene key="myScene"
component={myComponent}
renderTitle={() => { return <NavigationBarTitle title="My Title"/>}}
sceneStyle={styles.scene}
navigationBarStyle={[styles.navBar, this.props.theme.backgroundColor]} <- backgroundColor wird nicht aktualisiert, wenn sich der Status ändert
onRight={this.pushNoticeFilter}/>

Ich habe es geschafft, verschiedene Titel und Stile in meiner benutzerdefinierten Titelkomponente der Navigationsleiste dynamisch zu rendern, aber navigationBarStyle hört nicht auf Zustandsänderungen.

Hat dies etwas damit zu tun, dass RNRF das erneute Rendern von Szenen ignoriert, wo es "Schlüssel myScene ist bereits definiert!" ausgibt?

@mikaelrosquist @compojoom Ich verwende Redux, um die "Themen" zu speichern, die ich vom Server hole. Der einfachste Weg, den ich gefunden habe, dynamische Navigationsleistenstile zu erstellen, um einfach eine Wrapper-Komponente zu erstellen.

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 Danke! Funktioniert perfekt! 👍

@mikaelrosquist Kein Problem. Eine andere Sache, die ich interessant fand (da ich neu bei React bin), war, dass Sie die Standard-Requisiten einer RNRF-Szene festlegen können, indem Sie die Klasseneigenschaft defaultProps einer React-Komponente verwenden.

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};