在react-native中使用crosswalk webview內核來增強安卓webview體驗流暢性

最近使用react-native開發安卓app,由于我們要在webview中運行白鷺引擎開發的游戲，這樣就對webview性能有了要求，安卓手機內置的webview性能普遍很差，運行起來很卡，這樣我就開始探索使用crosswalk內核，在github搜索到了一個https://github.com/jordansexton/react-native-webview-crosswalk
但是這個插件很老了，現在是2018.11月，而他的還是兩年前的，語法老舊，而且在新版本rn0.55.4還有bug,所以我就借鑒他的代碼改造了下，由于作者貌似已經不維護了，所以只能自己開發npm包上傳用了
地址：https://github.com/fantasy525/react-native-crosswalk-webview-plus
在npm 可以搜索到，具體看下面

react-native-crosswalk-webview-plus

Crosswalk’s WebView for React Native on Android.

thanks jordansexton,He developed the original project,but He hasn’t been updated for two years so far (2018.9),and there are some bugs…,so I modified some source code

感謝 jordansexton，這個項目原本是他開發的，但是他已經兩年多沒有更新代碼了，而且原始代碼在我使用中有一些bugs，因此我修改了源碼去避免bug,同時我增加了一些額外的功能

Dependencies

• react-native >=0.57.0, react >= 16.5.0

Installation

• From the root of your React Native project

npm install react-native-crosswalk-webview-plus --save，或者 yarn add react-native-crosswalk-webview-plus 拷貝 node_modules/react-native-webview-crosswalk/libs/xwalk_core_library-23.53.589.4-arm.aar 到你的安卓項目 android/app/libs下，沒有libs就創建一個libs文件夾

Include module in your Android project

• In android/setting.gradle

... include ':CrosswalkWebView', ':app' project(':CrosswalkWebView').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-crosswalk-webview-plus')

Include libs in your Android project

• In android/build.gradle

... allprojects {repositories {mavenLocal()jcenter()flatDir { // <--- add this linedirs 'libs' // <--- add this line} // <--- add this line} }

• In android/app/build.gradle

... dependencies {...implementation (name: "xwalk_core_library-23.53.589.4-arm", ext: "aar") // <--- add this lineimplementation project(':CrosswalkWebView') // <--- add this line }

• Register package :

• used add code into MainApplication.java

import com.jordansexton.react.crosswalk.webview.CrosswalkWebViewPackage; // <--- add this linepublic class MainApplication extends Application implements ReactApplication {......@Overrideprotected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),new CrosswalkWebViewPackage() // <--- add this line);}......}

bugs

• 當我使用的時候我發現在任何頁面我用鍵盤輸入的時候不能輸入任何文字，同時app會崩潰退出，我跟我的安卓朋友一起研究了這個問題。我們發現如果在MainActivity 的onCreate生命周期里面new XWalkView(getApplicationContext(), this);
  也就是在mainActivity初始化的時候先new 一個webview實例的話app就不會崩潰了，同時我們測試如果在onCreate里面延時10s初始化的話也會崩潰，意味著react-native可能啟動mainActivity后修改了Context,導致某些webivew依賴的參數發生了變化，這些參數可能是靜態的，如果我們先初始化一下讓app保存最初的context,就不會崩潰了，因為你需要在mainActicity先new 一下
• 在react-native 0.57版本里面修復了上面的bug,同時這個webview還一直存在一個偶爾出現的空指針異常bug,時而有，時而沒有，經過安卓同學的排查發現是每次初始化時有問題，所以增加了xml布局文件來解決這個問題

總結

以上是生活随笔為你收集整理的在react-native中使用crosswalk webview内核来增强安卓webview体验流畅性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。