React 导航 - 底部选项卡不会显示 tabBarIcon

Question

我一直试图在我的反应导航选项卡栏上获得一个图标，这让我很困惑。这是我的代码片段：

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Welcome, Scan, History, Settings} from './screens';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import COLORS from './constants/colors';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
import { Ionicons } from '@expo/vector-icons';

// Bottom Tab Navigation
const TabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: COLORS.shrunkgreen,
        tabBarInactiveTintColor: COLORS.black,
        headerShown:true,
        headerTransparent:true,
        headerTintColor: COLORS.black,
        tabBarActiveBackgroundColor: COLORS.tabbarbackground,
        tabBarInactiveBackgroundColor: COLORS.tabbarbackground,
        tabBarLabelStyle: {
          fontSize: 12,
          marginBottom: 5,
          fontFamily: 'Poppins-Regular',
        },
        tabBarStyle: {
          height: 55,
          borderColor: COLORS.tabbarborder,
        },
      }}>
      <Tab.Screen name="Scan" component={Scan} options={{
        headerShown: false,
        tabBarIcon: ({ color, size }) => (
          <Ionicons name="scan" color={color} size={size} />
        )
      }}/>
      <Tab.Screen name="History" component={History} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
};

我正在尝试显示 Ionicons 的“扫描”图标。然而，IntelliJ 告诉我：

Unused property tabBarIcon

此代码是从此示例中提取的。

我多次尝试删除

node_modules

，但仍然没有成功。我的

package.json

:

{
  "name": "Shrunk",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-navigation/bottom-tabs": "^6.5.12",
    "@react-navigation/native": "^6.1.10",
    "@react-navigation/stack": "^6.3.21",
    "expo": "^50.0.8",
    "expo-camera": "^14.0.5",
    "expo-font": "^10.2.1",
    "expo-router": "^3.4.8",
    "react": "18.2.0",
    "react-native": "^0.73.4",
    "react-native-gesture-handler": "^2.15.0",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.29.0",
    "react-navigation": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.73.21",
    "@react-native/eslint-config": "0.73.2",
    "@react-native/metro-config": "0.73.5",
    "@react-native/typescript-config": "0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  },

  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}

这就是制作的全部：

Answer 1

您在 Tab.Screen 上应用 tabBarIcon 而不是 screenOptions

让我们在 Tabs.Navigator > screenOptions > tabBarIcon

 中添加 

tabBarIcon

示例

    <Tabs.Navigator
      screenOptions={({route}) => ({
        unmountOnBlur: true,
        tabBarIcon: ({focused}) => {
          let IconName;
          if (route.name === 'Home Screen') {
            IconName = focused
              ? (IconName = FocusedHomeIcon)
              : (IconName = HomeIcon);
          } else if (route.name === 'Inbox') {
            IconName = focused
              ? (IconName = FocusedPatientInboxIcon)
              : (IconName = PatientInboxIcon);
          } else if (route.name === 'Appointments') {
            IconName = focused
              ? (IconName = FocusedAppointmentsIcon)
              : (IconName = AppointmentIcon);
          } else if (route.name === 'Offers') {
            IconName = focused
              ? (IconName = FocusedOffersIcon)
              : (IconName = OffersIcon);
          } else if (route.name === 'My Profile') {
            IconName = focused
              ? (IconName = FocusedProfileIcon)
              : (IconName = ProfileIcon);
          } else if (route.name === 'My Notifications') {
            IconName = focused
              ? (IconName = FocusedProfileIcon)
              : (IconName = NotificationIcons);
          }
          return (
            <TouchableOpacity
              style={[styles.tabView]}
              onPress={() =>
                route?.name === 'Inbox' ||
                route?.name === 'Appointments' ||
                route?.name === 'My Profile' ||
                route.name === 'My Notifications'
                  ? handleNavigation({screenName: route?.name})
                  : route?.name === 'Home Screen' || route?.name ==='Offers'
                  ? navigation.navigate(route?.name)
                  : null
              }>
              <View
                style={[focused ? {...styles.active} : 
                {...styles.nonActive}]}
              />
              <IconName fill={SVG_COLOR} />
            </TouchableOpacity>
          );
        },
      })}
      tabBarOptions={{
        style: [styles.bottomBarStyle, {backgroundColor: ACTIVE_TAB}],
        labelStyle: [styles.labelStyle,{color:NEW_BUTTON_BACKGROUND_COLOR}],
      }}>
      <Tabs.Screen
        name="Home Screen"
        component={HomeScreen}
        options={{title: t('Home')}}
      />
      <Tabs.Screen
        name="Appointments"
        component={AppointmentsScreen}
        options={{title: t('Appointments')}}
      />
      <Tabs.Screen
        name="My Notifications"
        component={MyNotifications}
        options={{title: t('Notifications')}}
      />
      <Tabs.Screen
        name="My Profile"
        component={ProfileScreen}
        options={{title: t('My Profile')}}
      />
    </Tabs.Navigator>

希望对您有帮助。