打字稿：来自 createBottomTabNavigator 的 tabBarOptions

Question

我正在通过expo init 通过它的第三个选项构建一个 react-native 应用程序，它在 Javascript 中创建基本的导航模板。 最近我正在尝试使用现有模板的 Typescript，并尝试将这些 js 代码转换为 typescript，但无法弄清楚为什么 typescript 在 tabBarOptions 上引发错误。

以下是原始（官方）稍作修改的部分代码，与类型错误无关。代码本身是完全可运行的，并且该模式出现在许多关于如何在createBottomTabNavigator 中正确使用tabBarOptions 的问题中。

这是打字稿错误。

我还从 github 看到了布局组件关系的问题。

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

据我根据链接了解，该错误不会出现。我是打字稿的新手，所以如果我误解了任何概念，请不要评判我。

Answer 1

错误的症结在于 typescript 指出 fontWeight 的属性类型不兼容的那一行。

react-navigation-tabs 库仅接受有限数量的可能 fontWeight 值。您提供了正确的值，但是，Typescript 无法确定 tabConfig 的内容在任何地方都没有发生变化，因此它将 fontWeight 视为字符串。

有两种方法可以解决这个问题：

1. 内联移动tabConfig定义：

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

1. 将 tabConfig 声明为不可变的。这样 Typescript 将正确处理类型

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

createBottomTabNavigator({ tabConfig })