如何覆盖功能组件中的导航选项? [英] How to override navigation options in functional component?

问题描述

要使用类组件覆盖导航选项，就像

To override navigation options using class components, it would be something like

export default class SomeClass extends Component {

    static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('headerTitle'),
        }
    }

    componentDidMount() {
        this.props.navigation.setParams({ headerTitle: someVariableThatComesFromExternalCall })
    }

    ...
}

但是我如何使用功能组件来做到这一点??

But how can I do this using functional component??

export default function SomeFunctionalCompoenent({ navigation }) {

    // How and Where do I change the header title ?

    useEffect(() => { navigation.setParams({ headerTitle: someVariableThatComesFromExternalCall })})
    return (
        ...
    )
}

推荐答案

你仍然需要在你的功能组件上定义 navigationOptions.你这样做:

You still need to define navigationOptions on your functional component. You do it like this:

export default function SomeFunctionalComponent({ navigation }) {
    useEffect(() => { 
        navigation.setParams({ 
            headerTitle: someVariableThatComesFromExternalCall 
        }) 
    }, [])
}

SomeFunctionalComponent.navigationOptions = ({ navigation }) => {
    return {
        title: navigation.getParam('headerTitle'),
    }
}

这篇关于如何覆盖功能组件中的导航选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！