无法解析模块@react-navigation/native

当你在使用 React Native 开发应用时，可能会遇到类似于 “无法解析模块@react-navigation/native” 的错误提示。这通常意味着你的项目缺少某个依赖项或者配置有误。

原因

这个错误通常是因为你的项目没有正确安装 react-navigation 的依赖项。也可能是由于版本不匹配或者配置问题等引起的。

解决方案

1. 确保你的项目已安装了 react-navigation 和 react-native-reanimated 依赖项，并且版本匹配。

   yarn add @react-navigation/native
   yarn add react-native-reanimated
   

2. 确保你的项目已正确配置 babel.config.js 和 metro.config.js 文件。

   babel.config.js 示例：

   module.exports = {
     presets: ['module:metro-react-native-babel-preset'],
   };
   

   metro.config.js 示例：

   const { getDefaultConfig } = require('metro-config');
   
   module.exports = (async () => {
     const {
       resolver: { sourceExts, assetExts },
     } = await getDefaultConfig();
   
     return {
       transformer: {
         getTransformOptions: async () => ({
           transform: {
             experimentalImportSupport: false,
             inlineRequires: true,
           },
         }),
       },
       resolver: {
         assetExts: assetExts.filter(ext => ext !== 'svg'),
         sourceExts: [...sourceExts, 'svg'],
       },
     };
   })();
   

3. 如果你使用的是 Expo，检查你的 app.json 文件中是否包含以下配置：

   "expo": {
     "packagerOpts": {
       "config": "metro.config.js",
       "sourceExts": [
         "expo.ts",
         "expo.tsx",
         "expo.js",
         "expo.jsx",
         "ts",
         "tsx",
         "js",
         "jsx",
         "json",
         "wasm",
         "svg"
       ],
       "ignore": [
         "**/*.svg"
       ]
     }
   }
   

4. 如果以上方法都无效，可以尝试清除你的项目缓存，然后重新安装依赖并重新启动项目：

   rm -rf node_modules
   yarn cache clean
   yarn install
   yarn start --reset-cache
   

结论

以上是解决“无法解析模块@react-navigation/native”错误的方法。希望这篇文章能够帮助到你，如果你有什么疑问或者其他问题，请自行百度或者查看官方文档。