React Navigation底部导航tabBarIcon不显示问题求助

问题详情 #

给React Navigation底部导航栏设置tabBarIcon时，Ionicons的“scan”图标始终不显示，IntelliJ提示“Unused property tabBarIcon”。代码完全参考官方示例编写，多次删除node_modules重装依赖也没解决。目前底部导航只显示标签文字，无图标，效果如下：

代码片段 #

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>
  );
};

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/"
    ]
  }
}

解决方法 #

1. 移除版本冲突依赖 #

你的package.json里同时装了v6版的@react-navigation/bottom-tabs和v5版的react-navigation，两个版本会互相干扰，导致v6的API无法被正确识别。执行命令删除旧版依赖：

npm uninstall react-navigation
# yarn用户执行：yarn remove react-navigation

2. 确认图标名称正确性 #

Ionicons v13中部分图标需要指定平台前缀（md-或ios-），把图标名称改成md-scan试试：

<Ionicons name="md-scan" color={color} size={size} />

3. 彻底清除缓存并重构 #

执行以下命令清理所有缓存，再重新构建项目：

# 清除npm缓存
npm cache clean --force
# 清除Metro缓存
npx react-native start --reset-cache
# 重新安装依赖
npm install

4. 修复TypeScript类型提示（可选） #

如果IntelliJ的类型提示仍有问题，安装v6版的类型声明：

npm install @types/react-navigation@6 --save-dev

内容的提问来源于stack exchange，提问作者Harley Kradovill