技術標籤：reactnativewebview前端npmjavascriptreactjs

最近寫一個專案要使用webview，因為是androidTV，版本在5.0，所以瀏覽器核心比較老舊，很多功能和樣式顯示有問題。於是替換使用騰訊X5核心解決了問題。整理成了外掛react-native-webview-tencentx5。

react-native-webview-tencentx5

將安卓中webview瀏覽器核心替換為騰訊X5核心並保留react-native-webview中各種API。

可以優化Android版本低而使瀏覽器核心webveiw不正常顯示，同時使用騰訊X5方便擴充套件。

Getting started

$ npm install react-native-webview-tencentx5 --save

or

$ yarn add react-native-webview-tencentx5

Mostly automatic installation

Since React Native 0.60 and higher, autolinking makes the installation process simpler.

Manual installation

iOS

暫不支援IOS

Android

為了保障X5核心的動態下發和正常使用，您需要在您的AndroidManifest.xml增加如下許可權:

      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
      <uses-permission
 
 android:name="android.permission.ACCESS_WIFI_STATE" />
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />

Troubleshooting

The following situations are not errors

• 首次載入成功後，可能依舊為原始核心，等待X5核心下載啟動，往後都可正常使用
• 首次載入可能會出現卡頓白屏現象
• 請注意X5核心執行環境在模擬器下的影響，請使用真機除錯

Usage

import { WebView } from 'react-native-webview-tencentx5';

<WebView
    source={{ uri: 'https://www.bilibili.com/' }}
    ...
    />