找不到模塊：無法解析“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 節點模塊是否存在，然后我才知道模塊 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

要將網絡支持添加到現有的 Expo 應用程序，您可以執行以下操作：

1. 安裝最新版本的 Expo CLI： npm i -g expo-cli
2. 添加 web 依賴： yarn add react-native-web react-dom
3. 通過運行expo start:web在純 web 模式下更快地expo start:web您還可以運行expo start --web這將立即啟動 Webpack。

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

Answer 4

文件路徑沒有正確提及。 請再次檢查。 問題在於您外部導入 src 目錄中的文件並確認該文件位於上述路徑中。

Answer 5

您正在嘗試在其他 react 項目中添加 react-native。 React Native 類似於 React，但它使用原生組件而不是 Web 組件作為構建塊。 因此，在新文件夾中使用npm install -g react-native-cli 安裝 react-native ，然后使用react-native init ProjectName啟動新的 react-native 項目。

在 React Native 項目文件夾中運行react-native run-ios / run-android

參考

Answer 6

我會推薦EXPO ，它只需一個命令就可以設置本地編寫 react-native 所需的一切。 首先下載expo-cli； 在您的命令行中；

npm install expo-cli --global

安裝完成后，運行這個命令來創建一個項目；

expo init name_of_project

就是這樣。 一切都將完成，現在您只需開始編寫一些代碼。

Answer 7

只需在主應用程序文件夾中運行npm install解決我的問題。

Answer 8

我已經通過 expo init name_of_project 創建了項目，它也在網絡上運行，但是當我通過這個命令添加 mapbox 時 npm install @react-native-mapbox-gl/maps --save 我有一些錯誤

./node_modules/react-native/Libraries/Image/AssetSourceResolver.js:24:17 找不到模塊：無法解析“../Utilities/Platform” 22 | 23 | const PixelRatio = require('../Utilities/PixelRatio');

24 | const Platform = require('../Utilities/Platform'); | ^ 25 | 26 | const invariant = require('invariant'); 27 |

Answer 9

自從很多天“找不到模塊”以來，我一直面臨這個問題，簡單的解決方案是 go 到您的項目文件夾並刪除node_modules文件夾，然后嘗試我希望這個答案對您有幫助，謝謝。

Answer 10

升級 Webpack 后我遇到了類似的問題，對我來說執行全新安裝將解決它。

npm ci

Answer 11

我剛剛開始學習React Native，並想在頁面上添加輸入字段。 我已經完成了本教程來添加輸入字段。 但是，每當我運行React App時，它都會引發以下錯誤。

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

我已經檢查了react-native節點模塊是否存在，然后我知道了模塊react-native不存在。 我安裝了它，再次運行該應用程序，但顯示相同的錯誤。 我在此上花費了8多個小時，但無法解決此錯誤。 我已經嘗試了所有來自google的解決方案，但沒有一個對我有用。

注意：我使用的是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"
  }
}