ValidationError：选项对象无效。 expo-router 配置插件已使用与 API 架构不匹配的选项对象进行初始化

Question

我正在尝试使用 React Navigation 将项目迁移到 Expo Router。

出现此错误：

ValidationError：选项对象无效。 expo-router 配置插件已使用与 API 架构不匹配的选项对象进行初始化。 选项应该是一个对象： 对象 { origin、headOrigin？、unstable_src？、asyncRoutes？ }

package.json

{
  "name": "myapp",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "6.7.3",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "@react-navigation/stack": "^6.3.17",
    "expo": "~48.0.18",
    "expo-constants": "~14.2.1",
    "expo-crypto": "~12.2.1",
    "expo-linking": "~4.0.1",
    "expo-random": "~13.1.1",
    "expo-router": "^1.0.0",
    "expo-standard-web-crypto": "^1.6.0",
    "expo-status-bar": "~1.4.4",
    "metro-resolver": "0.76.0",
    "mobx": "^6.9.0",
    "mobx-keystone": "^1.6.2",
    "mobx-react-lite": "^3.4.3",
    "react": "18.2.0",
    "react-native": "0.71.8",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-get-random-values": "~1.8.0",
    "react-native-reanimated": "~2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-navigation-stack": "react-navigation/stack",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.0.14",
    "@types/react-native": "^0.72.2",
    "@types/react-native-get-random-values": "^1.8.0",
    "@types/react-navigation": "^3.4.0",
    "@types/uuid": "^9.0.2",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "eslint": "^8.44.0",
    "eslint-config-universe": "^11.2.0",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.3",
    "prettier": "^2.8.8",
    "typescript": "^4.9.4"
  },
  "private": true,
  "eslintConfig": {
    "extends": "universe/native"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "resolutions": {
    "metro": "0.76.0",
    "metro-resolver": "0.76.0"
  }
}

app.json

{
  "expo": {
    "name": "myapp",
    "slug": "myapp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "scheme": "myapp",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      }
    },
    "web": {
      "bundler": "metro",
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      "expo-router"
    ]
  }
}

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['expo-router/babel'],
  };
};

Answer 1

我遇到了同样的问题。我通过从 app.json/app.config.js 的插件列表中删除“expo-router”来修复它

这仅在开发中有效。生产中需要该插件，将以下配置添加到插件列表中，它将被修复。

  [
    "expo-router",
    {
      origin: "./assets",
    },
  ],

Expo Router 需要提供源配置，这是托管公共文件夹中资源的生产源 URL。

Answer 2

只需在根目录中运行此命令：

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar