Typescript 反应导航类型脚本：类型为的参数。。。不可分配给类型为'；底部选项卡导航配置'；

我正在构建React本机应用程序，并使用React navigation V2处理导航

我从中复制粘贴了以下代码：

const MainTabs=createBottomTabNavigator(
{Home:HomeStack，Settings:settingssstack}，
{
导航选项：（{navigation}:NavigationScreenProps）=>({
tabBarIcon:（{focused，tintColor}）=>{
const{routeName}=navigation.state；
让我来；
如果（路由名称==“主”）{
iconName=`ios信息圈${focused？”：“-outline”}`；
}else if（路由名称==“设置”）{
iconName=`ios选项${focused？”：“-outline”}`；
}
//您可以返回任何您喜欢的组件！我们通常使用
//来自本机向量图标的图标组件
返回；
}
}),
选项卡选项：{
activeTintColor:“番茄”，
颜色：“灰色”
}
}
)

出于某些原因，typescript引发以下错误：

[ts]
Argument of type '{ navigationOptions: ({ navigation }: any) => { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) => Icon; }; }' is not assignable to parameter of type 'BottomTabNavigatorConfig'.
  Types of property 'navigationOptions' are incompatible.
    Type '({ navigation }: any) => { tabBarIcon: ({ focused, tintColor }: { tintColor: string | null; focused: boolean; }) => Icon; }' is not assignable to type 'NavigationBottomTabScreenOptions | ((navigationOptionsContainer: NavigationScreenConfigProps & { navigationOptions: NavigationScreenProp<NavigationRoute<NavigationParams>, NavigationParams>; }) => NavigationBottomTabScreenOptions) | undefined'.

[ts]
类型为“{navigationOptions:（{navigation}:any）=>{tabBarIcon:（{focused，tintColor}:{tintColor:string | null；focused:boolean；}）=>Icon；}；}”的参数不能分配给类型为“BottomTabNavigatorConfig”的参数。
属性“navigationOptions”的类型不兼容。
类型“（{navigation}:any）=>{tabBarIcon:（{focused，tintColor}:{tintColor:string | null；focused:boolean；}）=>Icon；}”不能分配给类型“NavigationBottomTabScreenOptions |”（（navigationOptions容器：navigationScreenFigProps&{navigationOptions:NavigationScreenProp；}）=>NavigationBottomTabScreenOptions）|未定义”。

---

这怎么可能？我做错了什么？

根据道具的预期，您可能还需要在表达式中投射您正在传递的内容。比如：

navigationOptions: ({ navigation as any }: any)

---

根据我的经验，react navigation在NavigationOptions属性类型方面存在问题。这里的解决方案是为库创建一个适当的类型，并且非常具体地说明您拥有的类型

据我所见，这里的弱点是

tabBarIcon

函数参数类型。 向要解压缩的参数添加显式类型：

...
  tabBarIcon: ({ focused, tintColor }:TabBarIconProps) => {
...

---

返回类型应自动派生。

注意：选项={loginHeader as StackHeaderOptions}

const AuthStack = createStackNavigator()
export default () => (
   <AuthStack.Navigator screenOptions={navigationHeader}>
      <AuthStack.Screen name={Routes.LOGIN} component={Login} options={loginHeader as StackHeaderOptions} />
      <AuthStack.Screen name={Routes.CHAT.INFO} component={Info} />
      <AuthStack.Screen name={Routes.CHAT.FLOW} component={ChatFlow} />
   </AuthStack.Navigator>
)

const loginHeader = ({ navigation }) => ({
   title: 'Login',
   headerRight: () => (
       <HeaderButton
          imageSource={IMG_INFO}
          onPress={() => navigation.navigate('Info')}
       />
   )
}) 

const AuthStack=createStackNavigator（）
导出默认值（）=>(
任何
ing都有点违背了types@J.hester的目的，这就是为什么我说“我不熟悉这个库，所以不知道确切的类型，但却演示了语法。是的，我仍然感谢你的帮助
const AuthStack = createStackNavigator()
export default () => (
   <AuthStack.Navigator screenOptions={navigationHeader}>
      <AuthStack.Screen name={Routes.LOGIN} component={Login} options={loginHeader as StackHeaderOptions} />
      <AuthStack.Screen name={Routes.CHAT.INFO} component={Info} />
      <AuthStack.Screen name={Routes.CHAT.FLOW} component={ChatFlow} />
   </AuthStack.Navigator>
)

const loginHeader = ({ navigation }) => ({
   title: 'Login',
   headerRight: () => (
       <HeaderButton
          imageSource={IMG_INFO}
          onPress={() => navigation.navigate('Info')}
       />
   )
})