A React Native Webview that supports nested scrolling.
npm install @sdcx/nested-scroll-webviewNestedScrollWebView 为 react-native-webview 提供纵向嵌套滚动支持。
因为社区的 react-native-webview 并没有完全遵循 Android NestedScrolling API,导致在嵌套滚动的场景下,WebView 无法正常滚动。
本库修补了这个缺陷。
| @sdcx/nested-scroll-webview | react-native-webview | RN 架构 |
| --------------------------- | -------------------- | ------- |
| 0.3 | 11 | 旧 |
| 0.4 | 13 | 旧 |
| 1.x | 13 | 新 |
``sh`
yarn add react-native-webview
yarn add @sdcx/nested-scroll-webview
因为是补丁,要确保 @sdcx/nested-scroll-webview 在 react-native-webview 之后装配。
1. 在 java 代码中,新建一个 Package 类,也可以使用项目现成的。
在该类中,实现 ReactPackage 接口,返回 RNCNestedScrollWebViewManager。
`java
package com.example.myuidemo;
import com.reactnativecommunity.webview.RNCNestedScrollWebViewManager;
import java.util.Arrays;
public class MyUiPackage implements ReactPackage {
@NonNull
@Override
public List
return Collections.emptyList();
}
@NonNull
@Override
public List
return Arrays.asList(
new RNCNestedScrollWebViewManager()
);
}
}
`
2. 在 MainApplication.java 中,将该 Package 添加到 getPackages() 方法中。
`java`
@Override
protected List
@SuppressWarnings("UnnecessaryLocalVariable")
List
packages.add(new MyUiPackage());
return packages;
}
参考 patch-package
react-native-webview+13.16.0.patch
`diff
diff --git a/node_modules/react-native-webview/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java b/node_modules/react-native-webview/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java
index 4709e28..3fd284f 100644
--- a/node_modules/react-native-webview/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java
+++ b/node_modules/react-native-webview/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java
@@ -63,6 +63,10 @@ public class RNCWebViewManager extends ViewGroupManager
return mRNCWebViewManagerImpl.createViewInstance(context);
}
+ protected RNCWebViewWrapper createViewInstance(@NonNull ThemedReactContext context, RNCWebView webView) {
+ return mRNCWebViewManagerImpl.createViewInstance(context, webView);
+ }
+
@Override
@ReactProp(name = "allowFileAccess")
public void setAllowFileAccess(RNCWebViewWrapper view, boolean value) {
``