Question

我在我的本机Web应用程序中添加了Webrtc https://www.npmjs.com/package/react-native-webrtc模块。

我使用了npm i -s react-native-webrtc命令。但是在创建构建时，我遇到了以下错误：

错误：错误：无法从以下位置解析模块react-native-webrtc App.js：在项目中找不到react-native-webrtc或在以下目录中：node_modules

如果您确定模块存在，请尝试以下步骤： 1.清除守望者手表：守望者手表全部 2.删除node_modules：rm -rf node_modules并运行yarn install 3.重置Metro的缓存：yarn start --reset-cache 4.删除缓存：rm -rf / tmp / metro- * 在ModuleResolver.resolveDependency（D：\ smartek_project \ video_conferencing \ newchanges \ VC_Frontend \ node_modules \ metro \ src \ node-haste \ DependencyGraph \ ModuleResolution.js：186：15）在ResolutionRequest.resolveDependency（D：\ smartek_project \ video_conferencing \ newchanges \ VC_Frontend \ node_modules \ metro \ src \ node-haste \ DependencyGraph \ ResolutionRequest.js：52：18）在DependencyGraph.resolveDependency（D：\ smartek_project \ video_conferencing \ newchanges \ VC_Frontend \ node_modules \ metro \ src \ node-haste \ DependencyGraph.js：287：16）在Object.resolve（D：\ smartek_project \ video_conferencing \ newchanges \ VC_Frontend \ node_modules \ metro \ src \ lib \ transformHelpers.js：267：42）在dependencies.map.result（D：\ smartek_project \ video_conferencing \ newchanges \ VC_Frontend \ node_modules \ metro \ src \ DeltaBundler \ traverseDependencies.js：434：31）在Array.map（）位于resolveDependencies（D：\ smartek_project \ video_conferencing \ newchanges \ VC_Frontend \ node_modules \ metro \ src \ DeltaBundler \ traverseDependencies.js：431：18）在D：\ smartek_project \ video_conferencing \ newchanges \ VC_Frontend \ node_modules \ metro \ src \ DeltaBundler \ traverseDependencies.js：275：33 在Generator.next（）在asyncGeneratorStep（D：\ smartek_project \ video_conferencing \ newchanges \ VC_Frontend \ node_modules \ metro \ src \ DeltaBundler \ traverseDependencies.js：87：24）

这是我的package.json依赖项

"dependencies": {
    "@babel/polyfill": "^7.10.1",
    "@react-native-community/masked-view": "^0.1.10",
    "@react-native-community/voice": "^1.1.4",
    "@react-navigation/bottom-tabs": "^5.5.1",
    "@react-navigation/native": "^5.5.0",
    "@react-navigation/stack": "^5.4.1",
    "babel-plugin-react-native-web": "^0.12.2",
    "core-js": "^3.6.5",
    "react": "16.11.0",
    "react-dom": "^16.13.1",
    "react-native": "^0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.2",
    "react-native-screens": "^2.8.0",
    "react-native-web": "^0.12.2",
    "react-native-webrtc": "^1.75.3"
  },

Answer 1

我在这个问题上挣扎了很多天。只需按照我想出的指示进行即可。（我正在使用react-native-cli）

Step 1:

$ rm -rf node_modules/
$ npm i
$ npm i react-native-webrtc --save

Step 2: 将distributionUrl替换为此URL https\://services.gradle.org/distributions/gradle-5.5.1-all.zip

Step 3: 从此文件classpath的{{1}}替换为classpath("com.android.tools.build:gradle:3.4.1")。

android/build.gradle

Step 4:

希望这会起作用。

Answer 2

有两个问题导致我出错。

metro.config.js的行下方


 resolver: {
            blacklistRE: /react-native-web/,
            sourceExts: ["js", "json", "ts", "tsx", "android.js", "ios.js"]
          }

由于“ blacklistRE ”，在Android上运行应用程序时未包含webrtc模块。这就是为什么我遇到找不到模块错误的原因。我通过更改下面的代码行来解决

     resolver: {
    blacklistRE: /\react-native-web\b/,
    sourceExts: ["js", "json", "ts", "tsx", "android.js", "ios.js"]
  }

在解决此构建问题之后，创建了该构建，但应用并未为此发布，我在上面使用了@Shahnawaz Hossan为android建议的更改。我还用以下几行更新了AndroidManifest.xml中的android\app\src\main：

 <uses-permission android:name="android.permission.CAMERA" />
  <uses-feature android:name="android.hardware.camera" />
  <uses-feature android:name="android.hardware.camera.autofocus"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   <uses-permission android:name="android.permission.WAKE_LOCK" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

创建Android版本时找不到React Ntaive Webrtc的模块

2 个答案: