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是正确的。 以同样的方式，您可以使用Actions.refresh({navigationBarStyle ... })更新navigationBarStyle Actions.refresh({navigationBarStyle ... }) 。

你应该把 Actions.refresh() 调用放在哪里？
当我将刷新调用放在我的通量操作中时（在应该更改样式时调用）它只更新当前选定选项卡上的导航栏样式。 当我切换选项卡时，它会恢复到旧样式。

每当我切换选项卡时唯一更新的组件是我的 tabbar，所以我尝试将刷新放在componentWillReceiveProps或componentWillUpdate Tabbar 组件中。 然后我得到无限递归，因为每次刷新时，Tabbar 都会获得新的道具并再次刷新。

@aksonov你介意对此发表评论吗？

我在我的组件中使用 Actions.refresh，但我认为这不是动态更新场景属性的正确方法。 这是我的发现。

// 注意：我使用的是扩展 Component 的 es6 类

如果我们放置 Actions.refresh({title: 'drawer'}); 在构造函数中，然后反应抱怨：

警告：setState(...)：无法在现有状态转换期间更新（例如在render或其他组件的构造函数中）。 Render 方法应该是 props 和 state 的纯函数； 构造函数的副作用是一种反模式，但可以移动到componentWillMount 。

这只是一个警告，我们达到了预期的结果。 然而，有一个副作用——当我们这样做时，渲染函数被调用了两次。

如果我们直接把它放在 componentWillMount 函数中，那么 react 不会发出任何警告，但 render 也会被调用两次。

如果我们在构造函数中这样做：
this.props.navigationState.title = 'test';

那么 react 就不会抱怨了，我们的导航栏标题将被测试。 render 方法只会被调用一次。 调用 onRight、onRightTitle 等也是如此。现在事情是根据这个https://facebook.github.io/react/docs/jsx-spread.html#mutating -props-is-bad mutating props 是坏的。

所以，你可以改变不好的 props 或者你可以调用 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]} <- 状态改变时背景颜色不更新
onRight={this.pushNoticeFilter}/>

我已经设法在导航栏的自定义标题组件中动态呈现不同的标题和样式，但是 navigationBarStyle 没有监听状态变化。

这是否与 RNRF 忽略场景的重新渲染有关，它打印“Key myScene 已定义！”？

@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 的新手），您可以使用 React 组件的defaultProps类属性设置 RNRF 场景的默认道具。

class Scene extends RNRFScene { }

Scene.defaultProps = {
  navBar: CircllyNavBar
};