{ "description": "Routing and navigation for your React Native apps", "private": true, "workspaces": { "packages": [ "packages/*", "example" ] }, "publishConfig": { "access": "public" }, "license": "MIT", "repository": { "type": "git", "url": "git+https://github.com/react-navigation/react-navigation.git" }, "author": "Satyajit Sahoo <[email protected]> (https://github.com/satya164/), Michał Osadnik <[email protected]> (https://github.com/osdnk/)", "scripts": { "lint": "eslint \"**/*.{js,ts,tsx}\"", "typescript": "tsc --noEmit --composite false", "test": "jest", "clean": "lerna run clean", "build": "lerna run prepack", "publish": "lerna publish", "release": "run-s build publish", "example": "yarn workspace @react-navigation/example" }, "engines": { "yarn": "3.2.2", "node": ">=18" }, "packageManager": "[email protected]", "devDependencies": { "@babel/core": "^7.20.5", "@babel/generator": "^7.15.4", "@commitlint/config-conventional": "^12.1.4", "@evilmartians/lefthook": "^1.0.4", "@lerna-lite/cli": "^1.12.0", "@lerna-lite/run": "^1.12.0", "@types/jest": "^26.0.23", "babel-jest": "^26.6.3", "check-dependency-version-consistency": "^3.0.3", "commitlint": "^12.1.4", "eslint": "^7.27.0", "eslint-config-satya164": "^3.1.10", "eslint-plugin-simple-import-sort": "^7.0.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.66.0", "npm-run-all": "^4.1.5", "prettier": "^2.8.1", "typescript": "^4.9.4" }, "resolutions": { "expo-modules-autolinking": "~0.10.1", "@expo/config-plugins": "^5.0.0", "@expo/prebuild-config": "^5.0.1" }, "jest": { "testEnvironment": "node", "testRegex": "/__tests__/.*\\.(test|spec)\\.(js|tsx?)$", "setupFiles": [ "<rootDir>/jest/setup.js" ], "transformIgnorePatterns": [ "node_modules/(?!(@react-native|react-native|react-native-iphone-x-helper)/)" ], "moduleNameMapper": { "@react-navigation/([^/]+)": "<rootDir>/packages/$1/src", "react-native-tab-view": "<rootDir>/packages/react-native-tab-view/src" }, "preset": "react-native" }, "prettier": { "quoteProps": "consistent", "tabWidth": 2, "useTabs": false, "singleQuote": true, "trailingComma": "es5" } }

### 问题分析 在 React Native 应用中，出现 `Invariant Violation: View config getter callback for component 'RNSScreenStackHeaderConfig' must be a function (received 'undefined')` 错误，通常与组件配置或依赖项的安装和链接问题相关。该错误表明某个原生组件未能正确加载，导致 React Native 无法找到该组件的配置函数。具体到 `RNSScreenStackHeaderConfig`，它与 `react-native-screens` 或 React Navigation 的原生栈导航器相关[^2]。 --- ### 错误来源与解决方法 1. **依赖项未正确安装或链接** 如果 `react-native-screens` 或 `react-navigation` 相关依赖未正确安装或链接，可能导致该错误。`react-native-screens` 是 React Navigation 的底层依赖，负责提供原生栈导航器的支持。若未正确安装，`RNSScreenStackHeaderConfig` 无法被识别。 ```bash npm install react-native-screens react-native-gesture-handler ``` 对于 React Native CLI 项目（非 Expo），需手动链接原生模块： ```bash npx react-native link react-native-screens npx react-native link react-native-gesture-handler ``` 对于较新版本的 React Native（0.60+），通常会自动链接，但仍需检查 iOS 和 Android 原生配置是否正确[^2]。 2. **未正确配置 `react-native-screens`** `RNSScreenStackHeaderConfig` 是 `react-native-screens` 提供的原生组件之一，若未正确启用 `react-native-screens`，会导致组件未定义。 在入口文件（如 `index.js` 或 `App.js`）中添加以下代码以启用 `react-native-screens`： ```javascript import 'react-native-gesture-handler'; import { enableScreens } from 'react-native-screens'; enableScreens(); ``` 确保 `react-native-gesture-handler` 已安装，因为它是 `react-native-screens` 的依赖项[^2]。 3. **原生模块未正确编译或缓存问题** 构建缓存或原生模块未正确编译可能导致组件无法识别。可尝试清除 React Native 缓存并重新构建项目： ```bash npx react-native start --reset-cache npx react-native run-android -- --reset-cache # 或者对于 iOS cd ios pod deintegrate pod install --repo-update cd .. ``` 若使用 iOS 平台，进入 `ios` 目录并清理构建文件。 4. **React Native 版本兼容性问题** 某些版本的 `react-native-screens` 或 `react-navigation` 可能与当前 React Native 版本不兼容。需检查官方文档，确保所使用版本与 React Native 版本兼容。 ```bash npm install react-native-screens@latest npm install @react-navigation/native@latest ``` 若版本不兼容，考虑升级或降级相关依赖。 5. **未正确处理默认导出与命名导出** 如果组件未正确导出或导入，可能导致 `undefined` 被传递。检查组件导入语句是否正确，尤其是 `react-native-screens` 中的组件是否使用了默认导出或命名导出。 ```javascript import { NativeScreen } from 'react-native-screens'; ``` 确保没有拼写错误，并且组件名称与文档一致[^2]。 --- ### 示例代码 ```javascript // App.js import React from 'react'; import { enableScreens } from 'react-native-screens'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; // 启用 react-native-screens enableScreens(); const Stack = createStackNavigator(); function HomeScreen() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home Screen</Text> </View> ); } export default function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer> ); } ``` --- ###