我是新来的react 本机,但没有react ,我会疯了这个错误从2天

error: bundling failed: Error: While trying to resolve module `@react-navigation/native` from file `C:\XXXXX\Example\src\Router.jsx`, the package `C:\XXXXX\Example\node_modules\@react-navigation\native\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\@react-navigation\native\src\index.tsx`. Indeed, none of these files exist:

error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\App.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:

这是我的Package.json

{
  "name": "Example",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.6",
    "@react-navigation/native": "^5.0.0",
    "@react-navigation/stack": "^5.0.0",
    "eslint": "^6.8.0",
    "jetifier": "^1.6.5",
    "native-base": "^2.13.8",
    "prop-types": "^15.7.2",
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-camera": "^3.16.0",
    "react-native-gesture-handler": "^1.5.6",
    "react-native-image-crop-picker": "^0.28.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.2",
    "react-native-safe-area-view": "^1.0.0",
    "react-native-screens": "^2.0.0-beta.2",
    "react-native-svg": "^11.0.1",
    "react-native-vector-icons": "^6.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.3.3",
    "@babel/runtime": "^7.3.1",
    "@react-native-community/eslint-config": "^0.0.3",
    "babel-jest": "^24.1.0",
    "jest": "^24.1.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

我正在将react navigation版本降级为react navigation 4和react navigation stack

error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\node_modules\react-navigation-stack\lib\module\vendor\views\Stack\StackView.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:

我还删除了 node _模块,清除缓存并重新安装,但没有出现相同的错误

推荐答案

经过长时间的研究,MetroJS bundler默认不编译typescript.ts和.tsx扩展文件.

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx'], //add here
  },
};

React-native相关问答推荐

导航堆栈不显示

无法执行 JS 调用:__fbBatchedBridge 未定义

React Native Child Parent 通信

iPhone 6s plus 上的字体大小

Firebase检测用户是否存在

如何在 React Native 中获取 TextInput 相对于其父级或屏幕的光标位置

React Native Maps:标记图像不显示在 react-native-maps 中使用自定义标记

如何在react native应用程序名称中添加空格?

如何在 react-native 上自动聚焦下一个 TextInput

在特定屏幕上使用react-navigation修改后退按钮

require() 必须有一个字符串文字参数 React Native

React Native require(image) 返回数字

查找文本输入框和按钮字段的资源名称以响应本机 android 应用程序

在 React-Native 中手动设置 opacity 的 onPress of TouchableOpacity 的音量

在 FlatList 上使用 React Native 搜索过滤器

当前文件夹中的 react-native init

React Native:使用选项卡动画收缩标题

com.facebook.react.bridge.readablenativemap 不能转换为 java.lang.string

降级 react-native 的适当机制

如何在 react-native 中设置 Alert 元素的样式?