React Native底部导航栏图标报错：EXNativeModulesProxy未导出

问题重现 #

在Linux环境的Android模拟器中运行Expo React Native项目，使用@react-navigation/bottom-tabs配合expo-vector-icons时出现以下异常：

• 底部Tab图标完全无法显示
• 控制台抛出警告：The "EXNativeModulesProxy" native module is not exported through NativeModules; verify that expo-modules-core's native code is linked properly
• 移除MaterialCommunityIcons/Ionicons组件后，警告消失，导航功能恢复正常
• 已尝试删除node_modules并重新执行npm install，问题未解决

相关代码 #

import React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

// 省略其他无关代码

const HomeStack = () => {
    return (
        <View><Text>A</Text></View>
    )
};
HomeStack.navigationOptions = {
    title: 'Home'
};

const WorkoutStack = () => {
    return (
        <View><Text>b</Text></View>
    )
};
WorkoutStack.navigationOptions = {
    title: 'Workout'
};

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
       <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused ? 'home' : 'home';
              color = focused ? 'tomato' : 'grey';
              size = focused ? 25 : 20;
            } else if (route.name === 'workout') { // 此处存在大小写匹配错误
              iconName = focused ? 'workout' : 'workout';
              color = focused ? 'tomato' : 'grey';
              size = focused ? 25 : 20;
            }

            return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
          }
        })}
      >
      <Tab.Screen name="Home" component={HomeStack} />
      <Tab.Screen name="Workout" component={WorkoutStack} />
        
      </Tab.Navigator>
    </NavigationContainer>
  );
}
 
export default App;

依赖版本（package.json） #

{
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.5.11",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/stack": "^6.3.20",
    "asset": "^0.4.13",
    "expo": "^49.0.22",
    "expo-constants": "~14.4.2",
    "expo-modules-core": "^1.11.7",
    "expo-vector-icons": "^10.0.1"
  }
}

解决步骤 #

1. 修复代码中的两处错误 #

• 大小写匹配问题：Tab.Screen的name为Workout，但判断条件写的是route.name === 'workout'（小写），导致Workout Tab的图标逻辑不触发，修正为route.name === 'Workout'
• 图标名称错误：MaterialCommunityIcons中不存在名为workout的图标，替换为实际存在的图标名（比如dumbbell）

修正后的图标逻辑示例：

else if (route.name === 'Workout') {
  iconName = focused ? 'dumbbell' : 'dumbbell-outline';
  color = focused ? 'tomato' : 'grey';
  size = focused ? 25 : 20;
}

2. 修复Expo模块链接问题 #

作为Expo项目，不要使用React Native CLI的链接命令，执行以下命令清理并重建原生代码：

expo prebuild --clean
expo run:android

3. 调整依赖版本兼容性 #

expo-vector-icons@10.0.1为旧版本，与Expo 49不兼容，升级到适配版本：

npm install expo-vector-icons@^13.0.0

同时调整expo-modules-core版本匹配Expo 49（对应版本为~1.5.12），修改package.json后重新安装依赖：

"expo-modules-core": "~1.5.12"

执行：

npm install

4. 验证Expo环境配置 #

确保项目由Expo CLI初始化，而非React Native CLI；如果是混合项目，需确认Expo模块已正确集成。

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