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

最近使用react-native開發(fā)安卓app,由于我們要在webview中運行白鷺引擎開發(fā)的游戲，這樣就對webview性能有了要求，安卓手機內(nèi)置的webview性能普遍很差，運行起來很卡，這樣我就開始探索使用crosswalk內(nèi)核，在github搜索到了一個https://github.com/jordansexton/react-native-webview-crosswalk
但是這個插件很老了，現(xiàn)在是2018.11月，而他的還是兩年前的，語法老舊，而且在新版本rn0.55.4還有bug,所以我就借鑒他的代碼改造了下，由于作者貌似已經(jīng)不維護了，所以只能自己開發(fā)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，這個項目原本是他開發(fā)的，但是他已經(jīng)兩年多沒有更新代碼了，而且原始代碼在我使用中有一些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下，沒有l(wèi)ibs就創(chuàng)建一個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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。