如何覆盖功能组件中的导航选项?

您仍然需要在功能组件上定义导航选项。你这样做:

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

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

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

我用它来访问react上下文——获取用户名和头像,这样我就可以为他们设置一个很好的标题栏。我已经为这个粘贴了代码,以防它对任何人都有帮助:

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

const HomeScreen = ({ navigation }) => {

  const userContext = useContext(UserContext);

  useEffect(() => {
    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
  );
}