react-native-webview,安装后,真机调试报错



  • 1,yarn react-native-webview 安装
    2,react-native link react-native-webview 安装插件文档操作
    3,react-native run-android真机调试时,直接报错
    error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually:

    • react-native-webview (to unlink run: "react-native unlink react-native-webview")
      This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
      Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
      info JS server already running.
      info Installing the app...

    Configure project :react-native-webview
    :react-native-webview:reactNativeAndroidRoot /home/pan/pangit/react-native/padProject/node_modules/react-native/android

    Task :react-native-webview:compileDebugJavaWithJavac FAILED

    Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
    Use '--warning-mode all' to show the individual deprecation warnings.
    See https://docs.gradle.org/5.4.1/userguide/command_line_interface.html#sec:command_line_warnings
    15 actionable tasks: 2 executed, 13 up-to-date
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java:13: 错误: 程序包android.support.annotation不存在
    import android.support.annotation.RequiresApi;
    ^
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:14: 错误: 程序包android.support.annotation不存在
    import android.support.annotation.RequiresApi;
    ^
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:15: 错误: 程序包android.support.v4.content不存在
    import android.support.v4.content.ContextCompat;
    ^
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:16: 错误: 程序包android.support.v4.content不存在
    import android.support.v4.content.FileProvider;
    ^
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewFileProvider.java:3: 错误: 程序包android.support.v4.content不存在
    import android.support.v4.content.FileProvider;
    ^
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewFileProvider.java:10: 错误: 找不到符号
    public class RNCWebViewFileProvider extends FileProvider {
    ^
    符号: 类 FileProvider
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java:692: 错误: 找不到符号
    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    ^
    符号: 类 RequiresApi
    位置: 类 RNCWebChromeClient
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:178: 错误: 找不到符号
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    ^
    符号: 类 RequiresApi
    位置: 类 RNCWebViewModule
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:224: 错误: 找不到符号
    if (ContextCompat.checkSelfPermission(getCurrentActivity(), Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
    ^
    符号: 变量 ContextCompat
    位置: 类 RNCWebViewModule
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:352: 错误: 找不到符号
    return FileProvider.getUriForFile(getReactApplicationContext(), packageName + ".fileprovider", capturedFile);
    ^
    符号: 变量 FileProvider
    位置: 类 RNCWebViewModule
    注: /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java使用或覆盖了已过时的 API。
    注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译。
    注: /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.jav使用了未经检查或不安全的操作。
    注: 有关详细信息, 请使用 -Xlint:unchecked 重新编译。
    10 个错误

    FAILURE: Build failed with an exception.

    • What went wrong:
      Execution failed for task ':react-native-webview:compileDebugJavaWithJavac'.

    Compilation failed; see the compiler error output for details.

    • Try:
      Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 15s

    error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
    Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java:13: 错误: 程序包android.support.annotation不存在
    import android.support.annotation.RequiresApi;
    ^
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:14: 错误: 程序包android.support.annotation不存在
    import android.support.annotation.RequiresApi;
    ^
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:15: 错误: 程序包android.support.v4.content不存在
    import android.support.v4.content.ContextCompat;
    ^
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:16: 错误: 程序包android.support.v4.content不存在
    import android.support.v4.content.FileProvider;
    ^
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewFileProvider.java:3: 错误: 程序包android.support.v4.content不存在
    import android.support.v4.content.FileProvider;
    ^
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewFileProvider.java:10: 错误: 找不到符号
    public class RNCWebViewFileProvider extends FileProvider {
    ^
    符号: 类 FileProvider
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java:692: 错误: 找不到符号
    @RequiresApi(api = Build.VERSION_CODES.KITKAT)
    ^
    符号: 类 RequiresApi
    位置: 类 RNCWebChromeClient
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:178: 错误: 找不到符号
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    ^
    符号: 类 RequiresApi
    位置: 类 RNCWebViewModule
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:224: 错误: 找不到符号
    if (ContextCompat.checkSelfPermission(getCurrentActivity(), Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
    ^
    符号: 变量 ContextCompat
    位置: 类 RNCWebViewModule
    /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewModule.java:352: 错误: 找不到符号
    return FileProvider.getUriForFile(getReactApplicationContext(), packageName + ".fileprovider", capturedFile);
    ^
    符号: 变量 FileProvider
    位置: 类 RNCWebViewModule
    注: /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.jav使用或覆盖了已过时的 API。
    注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译。
    注: /home/pan/pangit/react-native/padProject/node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.jav使用了未经检查或不安全的操作。
    注: 有关详细信息, 请使用 -Xlint:unchecked 重新编译。
    10 个错误

    FAILURE: Build failed with an exception.

    • What went wrong:
      Execution failed for task ':react-native-webview:compileDebugJavaWithJavac'.

    Compilation failed; see the compiler error output for details.

    • Try:
      Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 15s

    at checkExecSyncError (child_process.js:616:11)
    at execFileSync (child_process.js:634:13)
    at runOnAllDevices (/home/pan/pangit/react-native/padProject/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:75:39)
    at buildAndRun (/home/pan/pangit/react-native/padProject/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:137:41)
    at then.result (/home/pan/pangit/react-native/padProject/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:103:12)
    at process._tickCallback (internal/process/next_tick.js:68:7)


  • 嗨,我也遇到了類似的問題,但已經解決了,希望對你有幫助:
    有幾件事情需要完成:

    • 重新建立一個 React-Native 專案
    • 手動安裝最新版本的 react-native-webview(我用NPM)
    • npm install --save react-native-webview@6.3.1
    • 進行 LINKING
    • react-native link react-native-webview
    • 接著運行專案
    • react-native run-android
    • 最後把 App.js 改成以上測試程式

    import React, { Component } from 'react';
    import { WebView } from 'react-native-webview';

    export default class MyWeb extends Component {
    render() {
    return (
    <WebView
    source={{ uri: 'https://infinite.red' }}
    style={{ marginTop: 20 }}
    />
    );
    }
    }

    希望對你有幫助。



  • @pzyydreact-native-webview,安装后,真机调试报错 中说:

    打开项目,Android目录留意一下文件的配置是否跟你目前能运行Android配置一致
    0_1562738731624_598a1b20-11d7-4e25-89f7-91de68a933a4-image.png