Машинопись: tabBarOptions от createBottomTabNavigator

Question

Я создавал реактивное приложение через expo init с помощью его третьей опции, которая создает базовый c шаблон навигации в Javascript. И недавно я пробовал Typescript с существующим шаблоном и пытался преобразовать этот код js в машинописный текст, но не могу понять, почему машинописный текст вызывает ошибки в tabBarOptions.

Ниже приведен частичный код с небольшими изменениями по сравнению с оригинальным (официальным), который не имеет ничего общего с ошибкой типа. Сам код отлично работает, и шаблон появляется во многих SO-вопросах о том, как правильно использовать tabBarOptions в createBottomTabNavigator.

Это ошибка машинописного текста.

Я также вижу проблему из github, которая определяет расположение компонентов.

https://github.com/react-navigation/tabs/issues/174

Насколько я понимаю по ссылке, ошибка не должна появляться. Я новичок в машинописи, поэтому, пожалуйста, не судите меня, если я неправильно понял какую-либо концепцию.

Answer 1

Суть ошибки в строке, где машинопись говорит о несовместимости типов свойства fontWeight. Библиотека

react-navigation-tabs принимает только ограниченное количество возможных значений fontWeight. Вы вводите правильное значение, однако Typescript не может быть уверен, что содержимое tabConfig нигде не видоизменено, поэтому он обрабатывает fontWeight как строку.

Существует два способа решения этой проблемы. :

1. Перемещение tabConfig определение inline:

createBottomTabNavigator({
   tabConfig: {
      labelStyle: {
         fontWeight: 'bold'
      }
      // and other props...
   }
})

Объявить tabConfig неизменным. Таким образом, Typescript будет правильно обрабатывать типы

const tabConfig = {
    labelStyle: {
        fontWeight: 'bold'
    }
    // and other props...
} as const; //<--- this `as const` operator does the trick

createBottomTabNavigator({ tabConfig })