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

Question

我在我的 react native 项目中使用 eslint 和 vs 代码。

我使用 react navigation v5 创建了一个底部标签导航：

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

我收到颜色道具的 eslint 错误：

道具验证中缺少'color'

我试图修复它：

ButtomTabs.propTypes = {
  color: PropTypes.string,
};

但我收到了这个错误：

propType "color" 不是必须的，但没有对应的 defaultProps 声明

Answer 1

忽略警告。这是一个误报。

1. tabBarIcon 不是组件，propTypes 仅适用于组件
2. 您在 BottomTabs 组件上添加了 propTypes，但假设传递给 tabBarIcon 的函数是组件，则该警告可能来自 eslint 插件

Answer 2

我相信之前的答案对在这种情况下导致 eslint 抛出 react/prop-types 错误的原因存在误解。 lint 错误是正确的 - 缺少的是为 tabBarIcon 引入的箭头函数的道具验证。由于该箭头函数返回一个 React 组件，因此 eslint 执行react/prop-types 规则是正确的。为了满足规则，您需要为该箭头函数提供道具类型（将箭头函数视为一个匿名组件，它以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} />
          ),
        }}

Answer 3

根据文档，

tabBarIcon 是底部选项卡导航器中支持的选项。所以我们知道我们可以在我们的屏幕组件中使用 options 属性，但是在这种情况下选择将它放在 Tab.Navigator 的 screenOptions 属性中是为了方便集中图标配置。 这是使用Icon 和Tab.Screen 的示例

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
return (
<Tab.Navigator
  initialRouteName="Feed"
  tabBarOptions={{
    activeTintColor: '#e91e63',
  }}
>
  <Tab.Screen
    name="Feed"
    component={Feed}
    options={{
      tabBarLabel: 'Home',
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="home" color={color} size={size} />
      ),
    }}
  />
  <Tab.Screen
    name="Notifications"
    component={Notifications}
    options={{
      tabBarLabel: 'Updates',
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="bell" color={color} size={size} />
      ),
    }}
  />
  <Tab.Screen
    name="Profile"
    component={Profile}
    options={{
      tabBarLabel: 'Profile',
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="account" color={color} size={size} />
      ),
    }}
  />
</Tab.Navigator>

); }