React Navigation 更改 componentDidMount 上的自定义标题标题

Question

我正在开发一个具有 tabNavigator 的应用程序，并且每个选项卡都有一个带有自定义标题的 stackNavigator。我需要能够从其中一个屏幕将参数传递给 stackNavigator 以更改标题标题。

MyScreen.js：

class MyScreen extends Component {
    state = {
        title: "My Title"
    }

    static navigationOptions = ({ navigation }) => {
        const appToolbarTitle = navigation.state.params && navigation.state.params.title
                ? navigation.state.params.title
                : "";
        console.log("NAV_PARAM: " + appToolbarTitle);
        return {
            header: props => {
                <AppToolbar title={appToolbarTitle} />;
            }
        };
    };

    setScreenTitle = title => {
        const { setParams } = this.props.navigation;
        setParams({ title: title });
    };

    componentDidMount() {
        if (this.state.title != null && this.state.title != undefined) {
            this.setScreenTitle(this.state.title);
        }
    }

    ....

}

AppToolbar.js：

const appToolbar = props => {
    return (
        <View style={styles.toolbar}>
            <Text style={styles.toolbarTitle}>{props.title}</Text>
            <TouchableOpacity onPress={...}>
                <Icon
                    name="ios-contact"
                    color="grey"
                    size={30}
                    style={{ padding: 0, margin: 0, marginRight: 10 }}
                />
            </TouchableOpacity>
        </View>
    );
};

出于某种原因，console.log 语句正确打印了在 componentDidMount 中传递的参数，但它似乎没有通过组件，关于我做错了什么有什么想法吗？

Answer 1

我认为你在这里错过了回报

header: props => {
               return  (<AppToolbar title={appToolbarTitle} />);
            }

或者只是

header: props => <AppToolbar title={appToolbarTitle} />