升级到 0.60.5 后 ReactWebViewManager 报错
ReactWebViewManager error after upgrading to 0.60.5
从 react-native 0.59.10
升级到 0.60.5
后,我们在构建 Android 时遇到此错误:
/workspace/mobile-custom-webview/mobile-custom-webview/android/src/main/java/invisionapp/customwebview/CustomWebViewManager.java:27: error: package com.facebook.react.
views.webview does not exist
import com.facebook.react.views.webview.ReactWebViewManager;
^
/workspace/mobile-custom-webview/mobile-custom-webview/android/src/main/java/invisionapp/customwebview/CustomWebViewManager.java:36: error: cannot find symbol
public class CustomWebViewManager extends ReactWebViewManager {
根据文档创建自定义webview:https://facebook.github.io/react-native/docs/custom-webview-android
摘自CustomeWebViewManager.java:
...
import com.facebook.react.views.webview.ReactWebViewManager;
import javax.annotation.Nullable;
import java.util.Map;
@ReactModule(name = CustomWebViewManager.REACT_CLASS)
public class CustomWebViewManager extends ReactWebViewManager {
...
React Native 版本:
info Fetching system and libraries information...
System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 37.35 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.16.1 - ~/.nvm/versions/node/v8.16.1/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.16.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.0, 28.0.1, 28.0.2, 28.0.3
System Images: android-25 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.5 => 0.60.5
在 package.json 中我们有:
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-webview": "6.8.0"
},
重现步骤
- 按照文档创建一个 Android CustomWebView:
https://facebook.github.io/react-native/docs/custom-webview-android
- 尝试通过
react-native run-android
构建 Android
描述您预期会发生什么:
Android 应用应该像以前一样构建和 运行 (0.59.10)
0.60 react-native 文档页面:
我们能够解决这个问题。这里有一些提示:
- 仔细阅读 Autolinking 文档!
- 如果它是一个独立的模块(就像我们的情况一样)那么你
需要在以下位置包含 react-native-webview:
模块的
build.gradle
implementation project(":react-native-webview")
并且在消费应用程序的 settings.gradle
中
include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
即使在消费应用程序中,它也应该是自动链接的。
此外,您需要在文件中添加一个名为 react-native.config.js
的文件
使用应用程序:
const path = require('path');
module.exports = {
dependencies: {
'mobile-custom-webview': {
root: path.resolve('../mobile-custom-webview'),
},
},
};
在定义 CustomWebView 的 Java 文件中:
替换:
import com.reactnativecommunity.webview.RNCWebViewPackage;
和
import com.reactnativecommunity.webview.RNCWebViewManager;
最后,一些方法有不同的签名,例如:ReactWebView --> RNCWebView
从 react-native 0.59.10
升级到 0.60.5
后,我们在构建 Android 时遇到此错误:
/workspace/mobile-custom-webview/mobile-custom-webview/android/src/main/java/invisionapp/customwebview/CustomWebViewManager.java:27: error: package com.facebook.react.
views.webview does not exist
import com.facebook.react.views.webview.ReactWebViewManager;
^
/workspace/mobile-custom-webview/mobile-custom-webview/android/src/main/java/invisionapp/customwebview/CustomWebViewManager.java:36: error: cannot find symbol
public class CustomWebViewManager extends ReactWebViewManager {
根据文档创建自定义webview:https://facebook.github.io/react-native/docs/custom-webview-android
摘自CustomeWebViewManager.java:
...
import com.facebook.react.views.webview.ReactWebViewManager;
import javax.annotation.Nullable;
import java.util.Map;
@ReactModule(name = CustomWebViewManager.REACT_CLASS)
public class CustomWebViewManager extends ReactWebViewManager {
...
React Native 版本:
info Fetching system and libraries information...
System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 37.35 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 8.16.1 - ~/.nvm/versions/node/v8.16.1/bin/node
Yarn: 1.16.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.16.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.0, 28.0.1, 28.0.2, 28.0.3
System Images: android-25 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.5 => 0.60.5
在 package.json 中我们有:
"dependencies": {
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-webview": "6.8.0"
},
重现步骤
- 按照文档创建一个 Android CustomWebView:
https://facebook.github.io/react-native/docs/custom-webview-android
- 尝试通过
react-native run-android
构建 Android
描述您预期会发生什么: Android 应用应该像以前一样构建和 运行 (0.59.10)
0.60 react-native 文档页面:
我们能够解决这个问题。这里有一些提示:
- 仔细阅读 Autolinking 文档!
- 如果它是一个独立的模块(就像我们的情况一样)那么你
需要在以下位置包含 react-native-webview:
模块的
build.gradle
implementation project(":react-native-webview")
并且在消费应用程序的 settings.gradle
中
include ':react-native-webview'
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
即使在消费应用程序中,它也应该是自动链接的。
此外,您需要在文件中添加一个名为 react-native.config.js
的文件
使用应用程序:
const path = require('path');
module.exports = {
dependencies: {
'mobile-custom-webview': {
root: path.resolve('../mobile-custom-webview'),
},
},
};
在定义 CustomWebView 的 Java 文件中: 替换:
import com.reactnativecommunity.webview.RNCWebViewPackage;
和
import com.reactnativecommunity.webview.RNCWebViewManager;
最后,一些方法有不同的签名,例如:ReactWebView --> RNCWebView