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

问题描述：

我需要读取一个值并使用它在导航栏中设置标题。
我正在使用react-native-router-flux，我也使用REDX。
我导航到查看我设置语言和fireredx动作的位置。
所有视图接收新的状态和render()方法我可以打电话：如何在加载视图时更改导航栏标题

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

这是通过终极版设定。我想改变导航栏标题，如：

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

但是，这会减慢应用程序，不工作。
但是如果不是render方法，不知道放在哪里。

你在用什么导航栏？一个自定义的？ – antoine129

答

您不应该在您的render方法中修改状态 - 这将导致无限循环的更改状态，从而导致重新呈现。

相反，你应该把这个生命周期中的方法：

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

当组件将被烧制的第一安装。

但组件已安装。这是第一个屏幕，然后我导航到第二个并更改语言。我现在不知道如何在第一屏进行更新。有没有像iOS中的viewWillApper方法，只要显示屏幕就会触发？ – 1110

最接近的东西是['componentWillReceiveProps']（https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops），每当它们改变时都会传递新的道具。 –

这种方法也没有帮助。当我通过redux更新状态时打开视图时会调用它。那时候屏幕不可见，所以我再也不能更新标题。 – 1110

答

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

这将允许您在组件的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?

答

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

componentWillReceiveProps(nextProps){ 
    let { language } = nextProps.language; 
    if (language && language != this.props.language.language) { 
     Actions.refresh({title: I18n.t('main', {locale: language})}) 
    } 
}

答

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

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

但是，它可能只是与它无关，而且从我的经验来看，我可以帮助你一个鬼鬼祟祟的黑客。这是一种解决方法，即使组件已被装载，Actions也不起作用。

只是用超时来包装你的动作，它就可以工作。这个解决方法最初来自于连续发射两个Action命令的事实将省略第一个。

将它放在componentDidMount(){}或componentWillReceiveProps(){}如果你喜欢Redux也可以触发这个功能。

setTimeout(() => { 
    Actions.refresh({key: 'somekey', title: I18n.t('main', {locale: this.props.language.language})}, 200); // give him some space! 
});

希望这是真的。

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

相关推荐