最近的奇葩需求~RN里接入微信的H5支付,iOS用RN的webview就可以做到,安卓死活不行....但是用安卓原生应用却可以!
于是想到用安卓原生WebView:
新建JAVA文件继承--注意:不是继承至xxxModule
ReactWebViewManager.class
public class ReactWebViewManager extends SimpleViewManager<WebView> {
public static final String REACT_CLASS = "RCTWebView";
@Override
public String getName() {
return REACT_CLASS;
}
@Override
protected WebView createViewInstance(ThemedReactContext reactContext) {
WebView webView = new WebView(reactContext);
webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
return webView;
}
@ReactProp(name = "url")
public void setUrl(WebView view,@Nullable String url) {
Log.e("TAG", "setUrl");
view.loadUrl(url);
}
@ReactProp(name = "html")
public void setHtml(WebView view,@Nullable String html) {
Log.e("TAG", "setHtml");
view.loadData(html, "text/html; charset=utf-8", "UTF-8");
}
}
然后:AnExampleReactPackage.class(新建) 注意:Module中返回Collections.EMPTY_LIST
public class AnExampleReactPackage implements ReactPackage {
@Nonnull
@Override
public List<NativeModule> createNativeModules(@Nonnull ReactApplicationContext reactContext) {
// List<NativeModule> modules = new ArrayList<>();
// modules.add(new ToastModule(reactContext));
return Collections.EMPTY_LIST;
}
@Nonnull
@Override
public List<ViewManager> createViewManagers(@Nonnull ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new ReactImageManager(),
new ReactWebViewManager());
}
}
最后在Application.java中注册
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new AnExampleReactPackage() //新增
);
}
然后就是再js中使用:
let AndroidWebView = requireNativeComponent('RCTWebView')
<AndroidWebView
url="https://wxpay.wxutil.com/mch/pay/h5.v2.php"
style={{ width:'100%', height: 400 }}>
</AndroidWebView>
这个url是微信H5支付的测试连接--提示商家参数格式有误/或者商家参数有误的话,继续修改 ReactWebViewManager.java文件中的WebView-----主要是重写shouldOverrideUrlLoading方法,请求头加入Referer
@Nonnull
@Override
protected WebView createViewInstance(@Nonnull ThemedReactContext reactContext) {
WebView webView = new WebView(reactContext);
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith("weixin://")) {
try {
Intent intent = new Intent();
intent.setAction(Intent.ACTION_VIEW);
intent.setData(Uri.parse(url));
reactContext.startActivity(intent);
} catch (Exception e) {
Toast.makeText(reactContext, "未安装微信应用", Toast.LENGTH_SHORT).show();
}
return true;
} else {
Map<String, String> extraHeaders = new HashMap<>();
extraHeaders.put("Referer","申请通过的商户url");
view.loadUrl(url, extraHeaders);
return true;
}
// view.loadUrl(url);
// return true;
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
// super.onReceivedSslError(view, handler, error);
}
});
return webView;
}