使用react-native-ionicons配合material-bottom-tabs图标显示为叉号问题

云原生阿岚

2026-10-5

问题排查与解决方案

1. 修复`react-native link`运行报错

该报错是因为0.60及以上版本的React Native已经废弃了全局react-native-cli工具，同时新增了自动链接特性，绝大多数第三方库不需要手动执行link命令即可生效。你无需安装旧版cli工具，直接跳过手动链接步骤即可。

2. 修复底部导航栏图标不显示问题

你使用的react-native-ionicons库已停止维护多年，无法适配新版React Native环境，建议替换为维护活跃的react-native-vector-icons库中的Ionicons图标集，操作步骤如下：

安装依赖：

npm install react-native-vector-icons --save
# 或使用yarn
yarn add react-native-vector-icons

iOS平台额外执行：进入项目ios目录，运行pod install完成原生依赖集成；安卓平台0.60+版本会自动完成链接，无需额外操作。
修改代码中的组件引入和使用逻辑，同时补全你原有代码中缺失的导航实例定义：

import Ionicons from 'react-native-vector-icons/Ionicons';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

// 补全导航实例定义，原有代码直接调用BottomTab会触发未定义报错
const BottomTab = createMaterialBottomTabNavigator();

const BottomNavigator = () => {
  return (
    <BottomTab.Navigator>
      <BottomTab.Screen 
        name="Home" 
        component={HomeScreen} 
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="add" size={size} color={color} />
          )
        }}
      />
      <BottomTab.Screen 
        name="Settings" 
        component={SettingsScreen} 
        options={{
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" size={size} color={color} />
          )
        }}
      />
    </BottomTab.Navigator>
  );
}