Как определить собственный заголовок внутри экрана в реакции навигации 5?

Question

я знаю, что мы используем опцию опор, когда определяем экран в root файле

 <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 }} />
    ),
  };
};

но как я могу это сделать в реагирующей навигации 5?

Answer 1

использовать navigation.setOptions

function HomeScreen({ navigation }) {

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