找不到module:无法解析'react-native' - React Native

IT技术 reactjs react-native
2021-05-13 15:32:16

我刚开始学习 React Native,想在页面中添加输入字段。我已经完成了本教程以添加输入字段。但是每当我运行 React App 时,它都会抛出以下错误。

./src/Inputs.js
Module not found: Can't resolve 'react-native' in 'E:\hybrid\reactDemo\src'

我已经检查过 react-native 节点module是否存在,然后我才知道 react-native module不存在。我安装它再次运行该应用程序,但它显示相同的错误。我已经为此花费了 8 多个小时,但无法解决此错误。我已经尝试了谷歌的所有解决方案,但没有一个对我有用。

注意: 我使用的是 Windows PC

更新 1:我正在导入 react-native,如下所示

import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'

更新 2:

这是我的 package.json 文件

{    
  "name": "reactDemo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-native": "^0.54.4",
    "react-router": "^3.0.5",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
4个回答

我不确定,但就我而言,它有助于通过npm install react-native-web. 希望它也能帮助你。

你的项目看不到 react-native 包。如果您已经安装了所有必需的依赖项(用于使用 react-native),请转到本文末尾。如果没有,我建议你有以下几点:

  1. react-scripts:包含 create-react-app 中使用的脚本。
  2. react-dom:允许将react代码呈现到 HTML 页面中
  3. react-native-web:这个应用程序的主要魔法来源。这个库会将我们的 react-native 组件转换为 web 元素。
  4. react-art: react-native-web 的对等依赖
  5. react-router-native: React Native 的路由库
  6. react-router-dom: Web 上 React 的路由库

================================================== ======================

首先,您需要兼容的 babel-jest 依赖项。要修复依赖关系树,请尝试按照以下确切顺序执行以下步骤:

  1. 删除项目文件夹中的 package-lock.json(不是 package.json!)和/或 yarn.lock。
  2. 删除项目文件夹中的 node_modules。
  3. 从项目文件夹中的 package.json 文件中的依赖项和/或 devDependencies 中删除“babel-jest”。
  4. 运行 npm install 或 yarn,具体取决于您使用的包管理器。

上面的配置不需要你手动配置 webpack,因为 react-scripts 做到了。

也许你不使用所有这些,甚至不使用 react-scripts,所以你必须配置你的 webpack.config.js。要解决此问题,请尝试以下操作:

const path = require('path')

module.exports = ({platform}, defaults) => ({
  ...defaults,
  entry: './index.js',
  /* ... */
  resolve: {
    ...defaults.resolve,
    alias: {
       ...defaults.resolve.alias,
      react: path.join(__dirname, 'node_modules/react'),
      'react-native': path.join(__dirname, 'node_modules/react-native'),
    }
  }
})

要将网络支持添加到现有的 Expo 应用程序,您可以执行以下操作:

  1. 安装最新版本的 Expo CLI: npm i -g expo-cli
  2. 添加网络依赖项: yarn add react-native-web react-dom
  3. 通过运行在 web-only 模式下更快地启动expo start:web你也可以运行expo start --web它会立即启动 Webpack。

来源https://docs.expo.io/guides/running-in-the-browser/

文件路径没有正确提及。请再次检查。问题在于您外部导入 src 目录中的文件并确认该文件位于上述路径中。