Définition du titre de NavigationBar de façon asynchrone

J'essaie de définir un NavigationBar pour mon Navigator. Lorsque j'affiche un titre statique, c'est OK. Toutefois, lorsque j'essaie de définir le titre de façon asynchrone (par exemple, lorsque j'accède à l'itinéraire du profil de l'utilisateur, j'obtiens le nom d'affichage de l'utilisateur à partir de l'API et définissez this.props.navigation.title lorsque la promesse d'appel de l'API se résout).Définition du titre de NavigationBar de façon asynchrone

Quelle serait l'approche appropriée pour ce problème?

Voici mon composant (qui est relié au magasin redux) qui gère 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);

Source

2016-04-21 Gökhan Sarı

Depuis routeMapper est un objet sans état et route semble être la seule façon (meilleure pratique) pour maintenir l'état de .

route peut être définie avec this.props.navigator.replace(newRoute); dans les composants enfants. Cependant, cela se retournera et provoquera parfois une boucle morte des composants enfants reRendering. Ce que nous voulons, c'est changer le NavigationBar lui-même sans effets secondaires.

Heureusement, il existe un moyen de conserver le contexte de l'itinéraire actuel. Comme ceci:

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

: Réfs

Source

2016-06-06 15:20:44

Définition du titre de NavigationBar de façon asynchrone

Répondre

Questions connexes