参考资料:
react-native-webview-tencentx5
手把手教你一步步集成腾讯 X5 内核(Tencent TBS X5)
之前基于 react-native-webview
封装的 Canvas
在比拟老的 android 手机上没法导出图片 canvas.toDataURL
生效了,就想用 react-native-webview-tencentx5
去代替 react-native-webvie
w,然而react-native-webview-tencentx5
不兼容 react-native@0.70.
所以只能借鉴 react-native-webview-tencentx5
从新去封装一个webview
。
- 去 TBS 官网下载 sdk
腾讯浏览服务 – SDK 下载
- 在 android/app 下创立 libs 而后把下载的 sdk 包放到文件夹里(把很长名字减短)
- 用 android studio 关上,右键点击 sdk 包,
Add As Library
- 下载 react-native-webview-tencentx5 的代码,把
android/src/main/java/indi/fan/webviewx5
文件夹整个拷贝到本人写安卓原生组建的文件夹下(我的文件夹名字是 webviewx) - 批改 java 文件引入的门路改成本人文件所在的门路
- 将 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()
);
}
}
- 批改 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);
}
}
- 引入到 MainApplication.java 里