Блог

Следуя инструкциям React Navigation здесь

У меня это есть в моем коде:

 useLayoutEffect(() => {
    function signOut() {
      setUser(undefined);
      navigation.navigate('Search');
    }
    navigation.setOptions({
      headerRight: () => <Button onPress={() => signOut()} title="Log out" type="clear" />,
    });
  }, [navigation, setUser]);
  

Я получаю ошибку TypeScript:

 Argument of type '{ headerRight: () => JSX.Element; }' is not assignable to parameter of type 'Partial<BottomTabNavigationOptions>'.
  Object literal may only specify known properties, and 'headerRight' does not exist in type 'Partial<BottomTabNavigationOptions>'.
  

Есть идеи, почему и как это можно исправить?

Проблема заключается в типе используемого вами навигатора. Код в документах отлично работает с навигатором стека или ящика. В навигаторе стека типы для navigation.setOptions являются:

 setOptions(options: Partial<StackNavigationOptions>): void;
  

Тип StackNavigationOptions включает в себя тип StackHeaderOptions , который объявляет headerRight свойство.

Вы получаете ошибку, потому что используете другой тип навигатора с другим типом опций.

 'headerRight' does not exist in type 'Partial<BottomTabNavigationOptions>'
  

Этот тип BottomTabNavigationOptions не включает в себя никаких типов, связанных с заголовком, потому что нижние вкладки не имеют заголовка.

Если вы хотите установить headerRight свойство, вам нужно использовать тип навигатора, который его поддерживает, например, навигаторы стека или ящика.