在react-native中使用crosswalk webview内核来增强安卓webview体验流畅性

在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 line
            dirs '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 line
  implementation project(':CrosswalkWebView')                             // <--- add this line
}

• Register package :

• used add code into MainApplication.java

import com.jordansexton.react.crosswalk.webview.CrosswalkWebViewPackage;    // <--- add this line

public class MainApplication extends Application implements ReactApplication {
  ......

  @Override
  protected 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布局文件来解决这个问题