乐趣区

关于java:React-Native封装tencentx5-Sdk的Webview

参考资料:
react-native-webview-tencentx5
手把手教你一步步集成腾讯 X5 内核(Tencent TBS X5)

之前基于 react-native-webview 封装的 Canvas 在比拟老的 android 手机上没法导出图片 canvas.toDataURL 生效了,就想用 react-native-webview-tencentx5 去代替 react-native-webview,然而react-native-webview-tencentx5 不兼容 react-native@0.70. 所以只能借鉴 react-native-webview-tencentx5 从新去封装一个webview

  1. 去 TBS 官网下载 sdk
    腾讯浏览服务 – SDK 下载
  1. 在 android/app 下创立 libs 而后把下载的 sdk 包放到文件夹里(把很长名字减短)
  1. 用 android studio 关上,右键点击 sdk 包,Add As Library
  1. 下载 react-native-webview-tencentx5 的代码,把 android/src/main/java/indi/fan/webviewx5 文件夹整个拷贝到本人写安卓原生组建的文件夹下(我的文件夹名字是 webviewx)
  2. 批改 java 文件引入的门路改成本人文件所在的门路
  1. 将 RNX5WebViewPackage.kt 文件改成 RNX5WebViewPackage.java
package com.xxxx.webviewx;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

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

public class RNX5WebViewPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new RNX5WebViewModule(reactContext)
        );
    }

    public List<Class<? extends JavaScriptModule>> createJSModules() {return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.asList(new RNX5WebViewManager()
        );
    }
}
  1. 批改 events 文件里的 kt 文件为 java(以 TopHttpErrorEvent 为例)
package com.xxxx.webviewx.events;

import com.facebook.react.bridge.WritableMap;
import com.facebook.react.uimanager.events.Event;
import com.facebook.react.uimanager.events.RCTEventEmitter;

public class TopHttpErrorEvent extends Event<TopHttpErrorEvent> {
    public static final String EVENT_NAME = "topHttpError";
    public int viewId;
    public WritableMap mEventData;

    public TopHttpErrorEvent(int viewId, WritableMap mEventData) {super(viewId);
        this.viewId = viewId;
        this.mEventData = mEventData;
    }

    public String getEventName() {return EVENT_NAME;}

    public boolean canCoalesce() {return false;}

    public short getCoalescingKey() {return 0;}

    public void dispatch(RCTEventEmitter rctEventEmitter) {rctEventEmitter.receiveEvent(this.viewId, this.EVENT_NAME, mEventData);
    }
}
  1. 引入到 MainApplication.java 里
退出移动版