如何在 React Navigation 5 中定义屏幕内的自定义 header？

Question

我知道我们在根文件中定义屏幕时使用选项属性

 <Stack.Screen
          name="index"
          component={Index}
          options={({ navigation, route }) => ({
            headerRight: (props) => (
              <MaterialIcons name="add" size={30} style={{ marginRight: 20 }} />
            ),
          })}
        />

但我想像我们以前在 React Navigation 4 中那样自己在屏幕上定义

Index.navigationOptions = () => {
  return {
    headerRight: (
      <MaterialIcons name="add" size={30} style={{ marginRight: 20 }} />
    ),
  };
};

但是我如何在 React Navigation 5 中做到这一点？

Answer 1

使用navigation.setOptions

function HomeScreen({ navigation }) {

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <MaterialIcons name="add" size={30} style={{ marginRight: 20 }} />
      ),
    });
  }, [navigation]);