异步设置 NavigationBar 的标题答案

【问题标题】：Setting NavigationBar's title asynchronously异步设置 NavigationBar 的标题
【发布时间】：2016-04-21 18:57:32
【问题描述】：

我正在尝试为我的Navigator 设置一个NavigationBar。当我显示静态标题时，就可以了。但是，当我尝试异步设置标题时（例如，当我转到用户的个人资料路由时，我从 API 获取用户的显示名称并在 API 调用承诺解析时设置 this.props.navigation.title）标题变得跳跃。

解决这个问题的正确方法是什么？

这是我处理NavigationBar的组件（连接到redux store）：

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

【问题讨论】：

标签： react-native redux navigationbar navigator

【解决方案1】：

由于routeMapper 是无状态对象，route 似乎是保持NavigationBar 状态的唯一方法（最佳实践）。

route 可以在子组件中使用this.props.navigator.replace(newRoute); 设置。但是，这会重新renderScene 并且有时会导致重新渲染子组件的死循环。我们想要的是在没有副作用的情况下更改 NavigationBar 本身。

幸运的是，有一种方法可以保留当前路线的上下文。像这样：

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

参考：

【讨论】：