找不到模块:无法解析'react-native' - React Native [英] Module not found: Can't resolve 'react-native' - React Native

问题描述

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

I have just started learning React Native and wanted to add input fields to the page. I have gone through this tutorial to add input fields. But whenever I run the React App it throws the following error.

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

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

I have checked if the react-native node-modules is there or not, then I came to know that the module react-native was not there. I installed it run the app again, but it shows the same error. I have spent more than 8 hours on this but unable to resolve this error. I have tried out all the solution from google but none of them worked for me.

注意:我使用的是 Windows PC

更新 1:我正在像下面这样导入 react-native

Update 1: I am importing react-native like following

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

更新 2:

这是我的 package.json 文件

This is my package.json file

{    
  "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"
  }
}

推荐答案

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

Your project can't see the react-native package. If you already have all required dependencies installed (for use of react-native) go the end of this post. if not, I suggest you have the following:

1. react-scripts: 包含在 create-react-app 中使用的脚本.
2. react-dom: 允许将 react-code 渲染到 HTML 页面中
3. react-native-web:此应用中的主要魔法来源.该库会将我们的 react-native 组件转换为 Web 元素.
4. react-art:react-native-web 的对等依赖
5. react-router-native: React Native 的路由库
6. react-router-dom: 网络上 React 的路由库

1. react-scripts: contains the scripts used in create-react-app.
2. react-dom: allows react-code to be rendered into an HTML page
3. react-native-web: the main source of magic in this app. This library will convert our react-native components into web elements.
4. react-art: a peer dependency for react-native-web
5. react-router-native: routing library for React Native
6. react-router-dom: routing library for React on the web

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

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

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

First thing first, you need compatible babel-jest dependencies. To fix the dependency tree, try following the steps below in the exact order:

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

上面的配置不需要你手动配置 webpack，因为 react-scripts 已经做到了.

The above configuration do not require you to have webpack manually configured, because react-scripts does that.

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

Maybe you don't use all that nor even react-scripts, so you must have to configure your webpack.config.js. To fix this, try the following:

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'),
    }
  }
})

这篇关于找不到模块:无法解析'react-native' - React Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！