如何在React Navigation 5中在屏幕内定义自定义标题？

Question

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

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

但是我想像在反应导航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]);