从React Navigation迁移至Expo Router时遭遇ValidationError错误

错误信息 #

ValidationError: Invalid options object. expo-router config plugin has been initialized using an options object that does not match the API schema.
options should be an object:
object { 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'],
  };
};

解决方案 #

问题根源是app.json中expo-router插件的配置格式不符合要求，该插件需要传入指定结构的配置对象，而非直接使用字符串。

1. 修正插件配置 #

修改app.json里的plugins数组，传入包含origin的配置对象：

"plugins": [
  ["expo-router", { "origin": "http://localhost:8081" }]
]

• origin为必填项，可填写Web环境的域名，仅开发原生应用时填本地开发地址即可
• 按需添加headOrigin、unstable_src等可选参数

2. 版本兼容调整 #

当前使用的expo-router@1.0.0属于早期版本，和新版Expo兼容性有限。若修正配置后仍有问题，建议升级依赖：

npx expo install expo@latest expo-router@latest

升级后需同步调整：

• 将package.json的main字段改为expo-router/entry
• 确保项目结构符合Expo Router要求，比如创建app/目录存放路由页面

3. 清理缓存重启 #

最后清理项目缓存并重启：

npx expo start --clear

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