找不到模块：无法解析'react-native' - React Native

Question

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

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

我已经检查过 react-native node-modules 是否存在，然后我才知道 react-native 模块不存在。我安装它再次运行该应用程序，但它显示相同的错误。我已经为此花费了 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"
  }
}

Answer 1

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

1. react-scripts：包含 create-react-app 中使用的脚本。
2. react-dom：允许将反应代码呈现到 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'),
    }
  }
})

Answer 2

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

Answer 3

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