您当前的位置: 首页 > 技术文章 > 移动开发

RN(React Native) Android 64位apk界面卡死

作者: 时间:2022-03-23阅读数:人阅读

RN Android 64位apk界面卡死

问题描述

Rn开发的程序,进行打包后的Anroid 64apk,在接入穿山甲广告之后,启动应用程序操作一段时间界面就会卡死,
具体表现为内嵌的webview可以进行点击和滑动操作,原生的界面可以上下滑动,但是不响应所有点击操作.软件也不会宕掉.

该问题只出现在64位apk中.32位apk表现正常

解决方案

先说解决方案,该问题由js引擎处于睡眠状态导致的,办法就是换一个js引擎, RN支持的引擎有JavaScriptCore和Hermes两种.该问题是在第一种引擎JavaScriptCore下出现的.所以换成Hermes引擎就可以了.
开启Hermes引擎支持
打开android/app/build.gradle文件,按照以下方式修改

  project.ext.react = [
      entryFile: "index.js",
-     enableHermes: false  // clean and rebuild if changing
+     enableHermes: true  // clean and rebuild if changing
  ]

这里贴一个RN的官方的链接,是介绍如何开启Hermes引擎支持的
启用 Hermes 引擎

解决思路

穿山甲

首先对问题进行定位,发现只要穿山甲进行了初始化就会出现该问题.且不论穿山甲的初始化在Application还是Activity,公司同事联系过穿山甲那边,穿山甲回应说没有对RN进行过兼容性测试,让我们自己解决…我们拿到的穿山甲依赖包都是经过混淆的,也没办法查看穿山甲的初始化到底做了什么操作…我.T…M…

对RN进行调试

从问题表现来看,界面的渲染应该是没有问题的,andorid是通过主线程进行界面渲染的,所以主线程是正常运行的,而且主线程卡顿几秒之后系统就会提示应用未响应的消息,让关闭该应用.

通过查询资料发现RN一共有三个线程

  1. 第一个线程用来运行js引擎,跑js代码
  2. 第二个线程是native线程,用来运行yoga引擎,计算布局
  3. 第三个线程就是主线程,进行界面渲染工作.

对RN进行Debug,需要关闭RN的在线加载功能,将js代码直接打包到资源文件中

1. 关闭RN在线加载功能
打开Application类,将getUseDeveloperSupport()方法的返回值修改为false就可以,如下

    @Override
    public ReactNativeHost getReactNativeHost() {
        if (mReactNativeHost == null) {
            mReactNativeHost = new ReactNativeHost(this) {
                @Override
                public boolean getUseDeveloperSupport() {
                    return false;
                }
                
                ......
                
            };
        }

        return mReactNativeHost;
    }

2. js代码打包至Android资源文件(index.android.bundle)
在Rn项目目录下运行如下命令行代码

react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle --assets-dest ./android/app/src/main/res/

打包的具体方法和介绍可以在网上找到,这里我贴一个其他人博客的链接,大家可以自己查看
react native 如何打包生成Js Bundle文件(以android 为例)

在调试的时候,我们继承了ReactActivity这个类作为测试类,然后让主界面继承测试类(防止对业务代码的误修改),在测试类中拦截点击消息,系统退出消息等.拦截代码如下

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        Log.v("test","======================main======================");
        MainApplication.reactManager.getCurrentReactContext().runOnJSQueueThread(() -> {
            Log.v("test","======================js线程======================");
        });
        return super.onKeyDown(keyCode, event);
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        Log.v("test","======================main======================");
        MainApplication.reactManager.getCurrentReactContext().runOnJSQueueThread(() -> {
            Log.v("test","======================js线程======================");
        });
        return super.onKeyUp(keyCode, event);
    }

MainApplication.reactManager 该变量可以从Application类中保持
获取方式

MainApplication.reactManager = getReactNativeHost().getReactInstanceManager()

界面正常工作的时候日志时正常打出来的.但是界面卡死之后就只有主线程的日志可以打印,js线程无响应.
从此处再次确定是js引擎问题,分析到这里问题已经能够定位了,但是我们当时并没有想到更换其他js引擎,然后我们去抓了运行时的堆栈信息,又做了其他事情…

写到这里,不得不感叹命运之神对我的眷顾. 回家的路上我突然想到,既然js引擎有问题,那我们换一个引擎试试行不行? 可能不同的引擎有不同的表现结果? 然后我查了下资料,发现好像可行. 我把这个消息告诉了同事,约定第二天试试…
第二天没用多少时间就确定方案有效…

再次感谢命运之神对我的加持

该博客只是为了学习新知识和梳理知识,如有错漏,还请大家指正.

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦

天猫38节现货-全屋智能