React-native-router-flux: Définir la navigationBarStyle dynamiquement dans le hook du cycle de vie d'une scène

De même, je cherche à utiliser un bouton droit dynamique sur la barre de navigation qui affiche une feuille d'action avec des actions dépendantes des données. Pensez... Follow userABC123 ; Block userABC123 ; etc. Existe-t-il un moyen de générer dynamiquement la fonction onRight dans un hook de cycle de vie (c'est-à-dire après l'extraction des données) pour produire une feuille d'action personnalisée ?

Oui, vous pouvez mettre à jour les accessoires via Actions.refresh(). Exemple:
Actions.refresh({ renderRightButton: this._renderRightButton });
https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

@sheparddw a raison. De la même manière, vous pouvez mettre à jour le navigationBarStyle avec Actions.refresh({navigationBarStyle ... }) .

Où placer l'appel Actions.refresh() ?
Lorsque je mets l'appel d'actualisation dans mon action de flux (qui est appelée lorsqu'il doit y avoir un changement de style), il met uniquement à jour le style de la barre de navigation sur l'onglet actuellement sélectionné. Lorsque je change d'onglet, cela revient à l'ancien style.

Le seul composant qui se met à jour chaque fois que je change d'onglet est ma barre d'onglets, j'ai donc essayé de mettre l'actualisation dans mon composant Tabbar dans componentWillReceiveProps ou componentWillUpdate . Ensuite, j'obtiens une récursivité infinie car chaque fois qu'il est actualisé, Tabbar obtient de nouveaux accessoires et il s'actualise à nouveau.

@aksonov voudriez-vous commenter cela?

Je jouais avec Actions.refresh dans mon composant, mais je ne pense pas que ce soit la bonne façon de mettre à jour dynamiquement les propriétés de la scène. Voici mes trouvailles.

// Remarque : j'utilise une classe es6 qui étend Component

Si nous plaçons Actions.refresh({title: 'tiroir'}); dans le constructeur, puis réagir se plaint avec ceci :

Avertissement : setState(...) : Impossible de mettre à jour pendant une transition d'état existante (comme dans render ou le constructeur d'un autre composant). Les méthodes de rendu doivent être une pure fonction des accessoires et de l'état ; les effets secondaires du constructeur sont un anti-modèle, mais peuvent être déplacés vers componentWillMount .

Ceci est juste un avertissement et nous obtenons le résultat souhaité. Cependant, il y a un effet secondaire - la fonction de rendu est appelée deux fois lorsque nous faisons cela.

Si nous plaçons cela directement dans la fonction componentWillMount, alors react n'émet aucun avertissement, mais render est également appelé deux fois.

Si on fait ça dans le constructeur :
this.props.navigationState.title = 'test';

alors réagir ne se plaindra pas et notre titre de barre de navigation sera testé. La méthode render sera appelée une seule fois. Il en va de même pour l'appel à onRight, onRightTitle, etc. Maintenant, la chose est selon ceci https://facebook.github.io/react/docs/jsx-spread.html#mutating -props-is-bad la mutation des accessoires est mauvaise.

Ainsi, vous pouvez soit muter les accessoires, ce qui est mauvais, soit appeler Actions.refresh et avoir des effets secondaires, tels que le rendu du composant deux fois... Des idées ?

Des mises à jour à ce sujet ? J'ai exactement le même problème en essayant de définir dynamiquement navigationBarStyle en fonction des accessoires de l'utilisateur. Plus précisément, j'essaie de changer la couleur d'arrière-plan de la barre de navigation. Actions.refresh({navigationBarStyle ... }) ne fonctionne pas non plus.

<Scene key="myScene"
component={myComponent}
renderTitle={() => { return <NavigationBarTitle title="My Title"/>}}
sceneStyle={styles.scene}
navigationBarStyle={[styles.navBar, this.props.theme.backgroundColor]} <- backgroundColor ne se met pas à jour lorsque l'état change
onRight={this.pushNoticeFilter}/>

J'ai réussi à rendre dynamiquement différents titres et styles dans mon composant de titre personnalisé de la barre de navigation, mais navigationBarStyle n'écoute pas les changements d'état.

Cela a-t-il quelque chose à voir avec le fait que RNRF ignore les rendus de scènes, où il affiche « La clé myScene est déjà définie ! » ?

@mikaelrosquist @compojoom J'utilise redux pour stocker les "thèmes" que je récupère sur le serveur. La façon la plus simple que j'ai trouvée de créer des styles de barre de navigation dynamiques pour créer simplement un composant wrapper.

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 Merci ! Marche parfaitement! 👍

@mikaelrosquist Pas de problème. Une autre chose que j'ai trouvée intéressante (car je suis nouveau dans React), c'est que vous pouvez définir les accessoires par défaut d'une scène RNRF en utilisant la propriété de classe defaultProps d'un composant React.

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};