异步设置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);

答

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

参考文献：

异步设置NavigationBar的标题

相关推荐