React-native-router-flux: Динамическая установка стиля navigationBarStyle в хуке жизненного цикла сцены

Точно так же я хочу использовать динамическую правую кнопку на панели навигации, которая отображает лист действий с действиями, которые зависят от данных. Подумайте ... 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 в своем компоненте, но не думаю, что это правильный способ динамического обновления свойств сцены. Вот мои выводы.

// Примечание: я использую класс es6, который расширяет Component

Если разместить Actions.refresh ({title: 'drawer'}); в конструкторе, то реагируем на жалобы следующим образом:

Предупреждение: setState (...): невозможно обновить во время существующего перехода состояния (например, в render или конструкторе другого компонента). Методы рендеринга должны полностью зависеть от свойств и состояния; побочные эффекты конструктора - это анти-шаблон, но их можно переместить в componentWillMount .

Это всего лишь предупреждение и мы добиваемся желаемого результата. Однако есть побочный эффект - функция рендеринга вызывается дважды, когда мы это делаем.

Если мы поместим это напрямую в функцию componentWillMount, то response не выдаст никаких предупреждений, но render также вызывается дважды.

Если мы сделаем это в конструкторе:
this.props.navigationState.title = 'test';

тогда реакция не будет жаловаться, и название нашей панели навигации будет проверено. Метод рендеринга будет вызван только один раз. То же самое касается вызова onRight, onRightTitle и т. Д. Теперь все в соответствии с этим https://facebook.github.io/react/docs/jsx-spread.html#mutating -props-is-bad мутировать реквизиты - это плохо.

Итак, вы можете либо изменить свойства, что плохо, либо вы можете вызвать Actions.refresh и получить побочные эффекты, такие как двойной рендеринг компонента ... Есть идеи?

Есть обновления по этому поводу? У меня такая же проблема, когда я пытаюсь динамически установить 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 игнорирует повторные рендеры сцен, когда он печатает «Key myScene is already defined!»?

@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 Нет проблем. Еще одна вещь, которая мне показалась интересной (поскольку я новичок в React), заключалась в том, что вы можете установить свойства по умолчанию для сцены RNRF, используя свойство defaultProps class компонента React.

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};