React Native安装Tab导航后出现buildLink不是函数错误求助

问题原因 #

你项目中使用的@react-navigation/native是v7.0.0-alpha.10（测试版），但@react-navigation/bottom-tabs和@react-navigation/stack仍为v6稳定版，版本不兼容导致API调用冲突——v7对buildLink的实现逻辑做了变更，而v6的BottomTabBar组件仍期望它是一个函数，因此抛出错误。

解决方案 #

1. 统一导航库版本为v6稳定版 #

降级@react-navigation/native到与其他导航库匹配的v6版本：

• 卸载当前版本：

  npm uninstall @react-navigation/native
  # 或使用yarn
  yarn remove @react-navigation/native
  

• 安装v6稳定版：

  npm install @react-navigation/native@^6.1.10
  # 或使用yarn
  yarn add @react-navigation/native@^6.1.10
  

2. 清理缓存并重启项目 #

版本变更后需要清理缓存避免残留问题：

• 清除包管理器缓存：

  npm cache clean --force
  # 或使用yarn
  yarn cache clean
  

• 清除Metro缓存并重启项目：

  npx react-native start --reset-cache
  

• 重新安装依赖：

  npm install
  # 或使用yarn
  yarn install
  

3. 验证导航配置（确保符合v6规范） #

确保你的Bottom Tab导航代码遵循v6的写法，示例如下：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default App;

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