如何覆盖功能组件中的导航选项？答案

【问题标题】：How to override navigation options in functional component?如何覆盖功能组件中的导航选项？
【发布时间】：2019-04-03 22:06:06
【问题描述】：

要使用类组件覆盖导航选项，它会类似于

export default class SomeClass extends Component {

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

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

    ...
}

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

export default function SomeFunctionalCompoenent({ navigation }) {

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

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

【问题讨论】：

您可以在导航器级别执行此操作...而不是组件级别
我忘了提，然后改了问题。标题标题将来自外部调用，它不是固定标题。

标签： react-native react-navigation

【解决方案1】：

您仍然需要在功能组件上定义 navigationOptions。你这样做：

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

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

【讨论】：

将[] 作为第二个参数添加到useEffect()。我们只希望它在初始加载时触发。
@AtlasRider 除此之外，将任何参数传递到[] 以在每次这些参数更改时再次运行效果。

【解决方案2】：

我怀疑接受的答案不适用于当前最新版本的 react navigation (5)，而且它绝对不适用于这个版本，所以这里有一个 @react-navigation/native 的工作示例v5.7.2：

export default function SomeFunctionalComponent({ navigation }) {
  useLayoutEffect(() => { 
    navigation.setOptions({ 
      headerTitle: 'some other title',
    }) 
  }, [])
}

我用它来访问反应上下文 - 获取用户的姓名和头像，这样我就可以为他们设置一个漂亮的标题栏。我已经粘贴了这个代码，以防它帮助任何人：

import React, { useContext, useLayoutEffect } from 'react';
import UserContext from '../context/UserContext';

const HomeScreen = ({ navigation }) => {

  const userContext = useContext(UserContext);

  useLayoutEffect(() => {
    navigation.setOptions({
      title : userContext.name,
      headerLeft : () => (
        <TouchableOpacity
          onPress={() => {
            navigation.openDrawer();
          }}
        >
          <FastImage
            style={styles.userPhoto}
            resizeMode={FastImage.resizeMode.cover}
            source={{ uri: userContext.avatar }}
          />
        </TouchableOpacity>
      ),
    });
  }, [ userContext ]);

  return (
    // etc
  );
}

【讨论】：

如果您使用功能组件，则在 5.7.3 中工作也优于已接受的答案