React native 反应导航选项卡屏幕图标颜色道具类型

我将eslint与vs代码一起用于我的react原生项目

我使用react navigation v5创建了底部选项卡导航：

 ...
   <Tab.Screen
        name="Contacts"
        component={ContactStackScreen}
        options={{
          tabBarLabel: 'Contacts',
          tabBarColor: COLORS.DEFAULT,
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons name="contacts" color={color} size={26} />
          ),
        }}
       ...

但我有一个错误：

---

propType“color”不是必需的，但根据文档，没有相应的defaultProps声明

tabBarIcon是底部选项卡导航器中受支持的选项。因此，我们知道我们可以在选项道具的屏幕组件上使用它，但在本例中，我们选择将它放在Tab.Navigator的屏幕选项道具中，以便于集中图标配置。 下面是将

图标

与

选项卡屏幕

从'@react navigation/bottom tabs'导入{createBottomTabNavigator}；
从“反应本机向量图标/材料通信图标”导入材料通信图标；
const Tab=createBottomTabNavigator（）；
函数MyTabs（）{
返回(
(
),
}}
/>
(
),
}}
/>
(
),
}}
/>

))；

---

}忽略警告。这是假阳性

tabBarIcon

不是组件，

propTypes

仅适用于组件

您正在

BottomTabs

组件上添加

propTypes

，但如果传递给

tabBarIcon

的函数是一个组件，则警告可能来自eslint插件

---

我相信前面的答案对是什么导致eslint在本例中抛出

react/prop类型
错误存在误解。lint错误是正确的-缺少的是为
tabBarIcon
引入的箭头函数的props验证。由于该arrow函数返回一个React组件，因此eslint执行
React/prop type
规则是正确的。为了满足规则，您需要为该箭头函数提供道具类型（将箭头函数视为一个匿名组件，它将
color
作为道具）。只需添加
{color:string}
作为该箭头函数的整个参数的类型定义，如下所示：

({color}: {color: string}) =>

在这方面：

<Tab.Screen
        name="Contacts"
        component={ContactStackScreen}
        options={{
          tabBarLabel: 'Contacts',
          tabBarColor: COLORS.DEFAULT,
          tabBarIcon: ({color}: {color: string}) => (
            <MaterialCommunityIcons name="contacts" color={color} size={26} />
          ),
        }}

(
),
}}
Maybe
activeTintColor
和
inactiveTintColor
props tabBarIcon函数，给定{focused:boolean，color:string，size:number}返回一个React.Node，显示在选项卡栏中。///在react navigationhello的文档中，我试图将配置放在screenOptions中，但我得到了相同的错误，是关于道具类型的。你能给我展示一个好的配置，用于eslint和vscode以及react native吗？这是我的配置，关于.eslintrc.js的内容呢？请阅读自述如何使用它，如果您只是在查找配置的内容，那么请检查index.js文件
({color}: {color: string}) =>

<Tab.Screen
        name="Contacts"
        component={ContactStackScreen}
        options={{
          tabBarLabel: 'Contacts',
          tabBarColor: COLORS.DEFAULT,
          tabBarIcon: ({color}: {color: string}) => (
            <MaterialCommunityIcons name="contacts" color={color} size={26} />
          ),
        }}