异步设置导航栏的标题

Question

我正在尝试为我的Navigator设置NavigationBar。当我显示静态标题时，它没问题。但是，当我尝试异步设置标题时（例如，当我转到用户的配置文件路由时，我从 API 获取用户的显示名称并在 API 调用承诺解析时设置this.props.navigation.title），标题变得跳跃。

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

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

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

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

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

幸运的是，有一种方法可以保留当前路由的上下文。喜欢这个：

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

裁判：

• 如何在不更改 React Native 中路由的情况下更改 NavigatorIOS 的标题

• [导航器] 将导航栏与底层场景绑定