如何在加載視圖時更改導航欄標題

我需要讀取一個值並使用它在導航欄中設置標題。
我正在使用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方法，不知道放在哪裏。

來源

2017-02-24 1110

你在用什麼導航欄？一個自定義的？ – antoine129

您不應該在您的render方法中修改狀態 - 這將導致無限循環的更改狀態，從而導致重新呈現。

相反，你應該把這個生命週期中的方法：

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

當組件將被燒製的第一安裝。

來源

2017-02-24 14:48:05

但組件已安裝。這是第一個屏幕，然後我導航到第二個並更改語言。我現在不知道如何在第一屏進行更新。有沒有像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?

來源

2017-03-02 11:47:02 grizzthedj

如果我清楚地理解你的問題你應該使用React Lifecycle方法componentWillReceiveProps()

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

來源

2017-03-03 09:09:31 Stro

我猜你缺少的是組件的關鍵，你的密鑰在路由器>場景樹中定義。

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! 
});

希望這是真的。

來源

2017-03-03 17:52:20 eden

如何在加載視圖時更改導航欄標題

回答

相關問題