Einstellung navigationbar Titel asynchron

Question

ich ein NavigationBar für meine Navigator zu setzen versuchen. Wenn ich einen statischen Titel anzeigen, ist es OK. Wenn ich jedoch versuche, Titel asynchron zu setzen (wenn ich beispielsweise zur Profilroute des Benutzers gehe, erhalte ich den Anzeigenamen des Benutzers aus API und setze this.props.navigation.title, wenn die API-Aufrufversprechung verrechnet wird), wird der Titel sprunghaft.

Was wäre der richtige Ansatz für dieses Problem sein?

Hier ist meine Komponente (die redux Speicher verbunden ist), die NavigationBar Griffe:

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

Answer 1

Da routeMapper staatenlos ist Objekt und route scheint der einzige Weg (Best Practice) zu sein, den Zustand zu halten von NavigationBar.

route mit this.props.navigator.replace(newRoute); in untergeordneten Komponenten eingestellt werden. Dies wird jedoch wieder renderScene und wird manchmal Dead-Schleife von reRendering untergeordneten Komponenten verursachen. Was wir wollen, ist die NavigationBar selbst ohne Nebenwirkungen zu ändern.

Glücklicherweise gibt es eine Möglichkeit, den Kontext der aktuellen Route zu halten. Wie folgt aus:

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

Refs:

• How to change the title of the NavigatorIOS without changing the route in React Native

• [Navigator] Binding the navigation bar with the underlying scene