Question

我正在尝试为NavigationBar设置Navigator。当我显示静态标题时，没关系。但是，当我尝试异步设置标题时（例如，当我转到用户的配置文件路径时，我从API获取用户的显示名称并在API调用promise解析时设置this.props.navigation.title）标题会变得很疯狂。

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

这是我的组件（连接到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);

Answer 1

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

可以在子组件中使用route设置

this.props.navigator.replace(newRoute);。但是，这将重新renderScene并且有时会导致reRendering子组件的死循环。我们想要的是改变NavigationBar本身没有副作用。

幸运的是，有一种方法可以保持当前路线的背景。像这样：

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

参考文献：

异步设置NavigationBar的标题

1 个答案: