Question

我需要读取一个值并使用它在导航栏中设置标题我正在使用react-native-router-flux，我也使用redux 我导航到查看我设置语言和fire redux动作的位置所有视图都会收到新状态，我可以调用render()方法：

console.log(this.props.language.language)

这是通过redux设置的。我想改变导航栏标题，如：

Actions.refresh({title: I18n.t('main', {locale: this.props.language.language})})

但是这会降低应用程序的速度并且不起作用但是，如果不在render方法中，不知道该放在哪里。

Answer 1

您可以通过如下设置导航参数来更改导航标题：

this.props.navigation.setParams({
    title: 'YOUR_DESIRED_TITLE_HERE',
});

Answer 2

您不应该在render方法中修改状态 - 这将导致无限循环的更改状态导致重新渲染。

相反，你应该把它放在生命周期方法中：

componentDidMount () {
  Actions.refresh(...)
}

首次安装组件时会触发。

Answer 3

您可以尝试将当前语言存储在整个应用程序中可全局访问的闭包中。

这将允许您在组件的constructor中设置语言状态，这可确保它在组件的整个生命周期中都存在。

// Settings.js
var Settings = (function() {
  var language = "EN"; // The default language

  var getLanguage = function() {
    return language;
  };
  var setLanguage = function(lang) {
    language = lang;
  };

  return {
    getLanguage: getLanguage,
    setLanguage: setLanguage
  }
})();

export default Settings;

如果要获取当前语言，并在组件中设置状态：

import Settings from './Settings';
... 
constructor(props) {
  super(props);
  this.state = {
    language: Settings.getLanguage()
  }
}

当您想要设置或更改当前语言时：

import Settings from './Settings';
... 
Settings.setLanguage('FR');

// Do something like reload here?

Answer 4

如果我清楚地了解您的问题，您应该使用React Lifecycle方法componentWillReceiveProps()

A3

Answer 5

我猜你缺少的是组件的关键，你的密钥在路由器＆gt;中定义。场景树。

componentDidMount(){}

但是，它可能不是关于它，根据我的经验，我可以帮助你偷偷摸摸的黑客。这是一种解决方法，即使已经安装了组件，但当Actions不起作用时我发现了这种方法。

只需用超时包装你的动作，它就可以了。这种解决方法最初的灵感来自于连续触发两个Action命令将省略第一个。

如果您希望Redux触发此功能，请将其放在componentWillReceiveProps(){}或setTimeout(() => { Actions.refresh({key: 'somekey', title: I18n.t('main', {locale: this.props.language.language})}, 200); // give him some space! });中。

    $node = $this->MapNodes()->where('type_id', $typeId )->with('NodeCounters')->first();

希望情况确实如此。

如何在视图加载时更改导航栏标题

5 个答案: