異步設置NavigationBar的標題

我想爲我的Navigator設置NavigationBar。當我顯示一個靜態標題時，它是可以的。但是，當我嘗試異步設置標題時（例如，當我訪問用戶的配置文件路徑時，我從API獲取用戶的顯示名稱，並在API調用promise做出解析時設置this.props.navigation.title），標題變得非常激動。異步設置NavigationBar的標題

這個問題的正確方法是什麼？

這裏是我的組件（連接到Redux的商店），處理NavigationBar：

import React from 'react-native'; 
let { 
    Component, 
    Navigator, 
    View 
} = React; 

import {connect} from 'react-redux'; 

let NavigationBarRouteMapper = { 
    Title: (route, navigator, index, navState) => { 
     return (
      <Text style={{marginTop: 15, fontSize: 18, color: colors.white}}>{this.props.navigation.title}</Text> 
     ); 
    } 
}; 

class App extends Component { 
    render() { 

     return (
      <View style={{flex: 1}}> 
       <Navigator 
        ref={'navigator'} 
        configureScene={...} 
        navigationBar={ 
         <Navigator.NavigationBar routeMapper={ NavigationBarRouteMapper } /> 
        } 
        renderScene={(route, navigator) => {...}} 
       /> 
      </View> 
     ); 
    } 
} 

export default connect(state => state)(App);

來源

2016-04-21 Gökhan Sarı

由於routeMapper是一個無狀態的對象和route似乎是唯一的出路（最佳實踐），以保持狀態NavigationBar。可以在子組件中設置this.props.navigator.replace(newRoute);。但是，這將重新編號爲renderScene，並且有時會導致重新渲染子組件的死循環。我們想要的是改變NavigationBar本身而不產生副作用。

幸運的是，有一種方法可以保留當前路線的上下文。就像這樣：

var route = this.props.navigator.navigationContext.currentRoute; 
route.headerItems = {title: "Message"}; 
this.props.navigator.replace(route);

參考文獻：

來源

2016-06-06 15:20:44

異步設置NavigationBar的標題

回答

相關問題