RN 调用原生WebPage 解决微信支付Referer问题

Posted 2021-11-23 iOSTianNan

安卓原生webView代码

BXReactWebViewManager.java

package com.regan.ebankhome;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.net.Uri;
import android.net.http.SslError;
import android.util.Log;
import android.webkit.SslErrorHandler;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
import com.facebook.react.uimanager.annotations.ReactPropGroup;

import java.util.HashMap;
import java.util.Map;

public class BXReactWebViewManager extends SimpleViewManager<WebView> {

    public static final String RN_CLASS = "BXRCTWebView";
    public String url;
    public String referer;

    @Override
    public String getName() {
        return RN_CLASS;
    }

    @SuppressLint("ResourceAsColor")
    @Override
    protected WebView createViewInstance(ThemedReactContext reactContext) {
        WebView wv = new WebView(reactContext);


        WebSettings webSettings = wv.getSettings();
        webSettings.setAllowFileAccessFromFileURLs(true);

        webSettings.setjavascriptEnabled(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
        webSettings.setDomStorageEnabled(true);
        webSettings.setDatabaseEnabled(true);
        webSettings.setAppCacheEnabled(true);
        webSettings.setAllowFileAccess(true);
        webSettings.setSavePassword(true);
        webSettings.setSupportZoom(true);
        webSettings.setBuiltInZoomControls(false);
        webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
        webSettings.setUseWideViewPort(false);
        webSettings.setLoadWithOverviewMode(true);


        wv.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.e("?????????-url",url);
                Log.e("?????????-referer",referer);
//                view.loadUrl(url, (HashMap<String, String>) new HashMap<>().put("Referer", referer));
//                return false;
                try {
                    if (url.startsWith("weixin://") || url.startsWith("alipays://")) {
                        Intent intent = new Intent();
                        intent.setAction(Intent.ACTION_VIEW);
                        intent.setData(Uri.parse(url));
                        reactContext.startActivity(intent);
                        return true;
                    }
                } catch (Exception e) {
                    return false;
                }



                if (url.contains("https://wx.tenpay.com")) {
                    Map<String, String> extraHeaders = new HashMap<>();
                    extraHeaders.put("Referer", referer);
                    view.loadUrl(url, extraHeaders);
//                    referer = url;
                    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) {
//                super.onReceivedSslError(view, handler, error);
                // 不要使用super，否则有些手机访问不了，因为包含了一条 handler.cancel()
                // super.onReceivedSslError(view, handler, error);
                // 接受所有网站的证书，忽略SSL错误，执行访问网页
                handler.proceed();
            }

        });
        return wv;
    }


    @ReactProp(name = "loadInfo")
    public void setLoadInfo(WebView view, @Nullable ReadableMap loadInfo) {
        String url = loadInfo.getString("url");
        String referer = loadInfo.getString("referer");
        Log.e("*(*(*(*(--url", url);
        Log.e("*(*(*(*(--referer", referer);
        this.url = url;
        this.referer = referer;
        view.loadUrl(url, (Map<String, String>) new HashMap<>().put("Referer", this.referer));
    }

    @ReactProp(name = "html")
    public void setHtml(WebView view, @Nullable String html) {
        Log.e("*(*(*(*(--html", html);
        view.loadData(html, "text/html; charset=utf-8", "UTF-8");
    }


}

RN桥接文件

BXReactWebViewPackage.java

package com.regan.ebankhome;

import androidx.annotation.NonNull;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.modules.toast.ToastModule;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;

public class BXWebViewReactPackage implements ReactPackage {


    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
                new BXReactWebViewManager()
        );
    }

}

调用

     packages.add(new BXWebViewReactPackage());

-------- js -----------

导出原生组件

import React, {} from 'react';
import {requireNativeComponent, View} from 'react-native';

//新版本必须加...View.propTypes
var iface = {
  name: 'WebView',
  propTypes: {
    url: "",
    html: "",
    ...View.propTypes
  },
}

const BxWeb = requireNativeComponent('BXRCTWebView', iface, {
  nativeOnly: {
    "testID": true,
    'renderToHardwareTextureAndroid': true,
    'accessibilityComponentType': true,
    'accessibilityLabel': true,
    'importantForAccessibility': true,
    'accessibilityLiveRegion': true,
    'onLayout': true,
  }
});

export default BxWeb;

rn组件使用

          <BxWeb style={{flex: 1}}
                 loadInfo={{
                   url: uri,
                   referer: headers.Referer
                 }}
          />