记一次React Native远程调试,解决只能在千里之外重现的Bug(深坑提醒:华为EMUI5上某些样式属性失效)

前言

这篇文章的主要内容有两个:

  1. React Native如何调试不在局域网内的设备、如何把这些设备变成在局域网内方便地调试(无论设备在4G还是Wifi的情况下)
  2. 深坑提醒:截止到发稿前华为P10最新版本系统 EMUI5.0 (Android 7.0),Style Sheet中的transform属性失效了

故事的起因

一天,老师过来跟我说,咱们App聊天模块里面的列表,在X同事的华为P10手机上面显示不出来,X能发消息,别人也能看到X发的消息,但是X同事却连自己发的消息也看不到,是个必现的问题,让我查查这是什么幺蛾子。

想到X同事上班的部门跟我不在同一个城市,公司也不至于壕到一言不合就买一台目前还挺贵的测试机,此时我想了想,为了避免出差的麻烦,还是把那句:“我不知道,我这里是好的” 憋住了。(当然,我并不是这样的人,如果老师看到了这篇文章,这只是个梗)

分析问题

首先想到:服务端的锅
由于我们聊天列表的数据,客户端是不保存的,这份数据由服务端维护,客户端订阅上后,服务端会给客户端返回指定数据,于是让服务端的哥们帮忙调试,经过一轮紧张忙碌的调试,最后他告诉我:“我不知道,我这里是好的”。(老师,这还是梗)

为了证明服务端哥们这轮调试的结论是对的,我想我最好能看到X同事手机上面的Log信息,甚至打断点去debug,看看客户端出了什么问题。

提出设想

由于React Native本身就支持Debug JS Remotely,所以首先想到的,肯定是把我的机器配置到外网,然后让X同事连接到我机器上就能进行调试;其本地的npm服务将会加载node_modules,然后提供8081端口给debug包的app进行请求,最终做到了动态把js代码传输到debug包的程序上。

Just do it.

有了这个想法之后,就去找运维同学,一波操作过后,我的电脑已经可以在公网上进行访问了,二话不说,就是干:

  1. 提取debug apk: 当前项目下,找到 “android/app/build/outputs/apk/app-debug.apk”,如果修改过项目模块名称,自己去找回对应的路径,相信这个不会有难度;在React Native项目中,这个debug包跟release包最大的区别是:release包已经打包好了所有.js文件到assets目录中,而debug包是通过请求加载本项目js代码的npm服务来动态加载js文件;
  2. 安装debug包,运行debug程序后,在 “Dev Settings” 中设置 “Debug server host & port for device” ,地址修改为自己电脑的公网ip,端口8081;
  3. 在调试菜单中,选择 “Debug JS Remotely”

接下来当然就是最激动人心的时刻啦,X同事的机器顺利地连上了我电脑本地的npm服务,我和运维小哥四目相视,会心一笑。然而,事情总是出乎意料,命运也喜欢捉弄人,一下秒,X妹子说手机红屏了,在我的Chrome调试页面中打印了一行:

1
2
3
Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://localhost:8082/create_session'
Realm failed to connect to the embedded debug server inside the app.
If attempting to use Chrome debugging from a device, ensure the device is reachable on the same network as this machine.

惊不惊喜,意不意外?

咋一看,似乎问题不大,再把我机器的8082端口打开,是不是应该就可以了?然而,事情总是出乎意料,命运也喜欢捉弄人。X妹子说,还是一样耶。然后,我在realm-js的项目下找到了这个issues: https://github.com/realm/realm-js/issues/284,这个issues已经是closed状态,但是可能因为我在非局域网调试的原因,升级到最新版本的realm-js,仍然存在。此时,默默说了一句WTF之后,我感觉整个人垮掉了。

WTF之后的思考

注意到错误提示中的 “ensure the device is reachable on the same network as this machine” ,我又有了一个大胆的想法:让X同事的手机,跟我的电脑在同一个网段。

这…似乎还真有这么一种操作,这个世界上,有一种叫 “微屁恩” 东西(谐音:指的是和谐的声音),假设我的电脑和X同事的手机,同时连接上我们自己的微屁恩服务器,通过这个代理的地址,似乎就可以实现 “在同一个网段” 这个需求。

电脑连接上微屁恩后,会再分配一个地址,Mac上使用ifconfig命令查看 (Win ipconfig):

下面这一波操作就很稳了,我们终于顺利连接到了X同时的手机,可以看到Log,也看到打断点,甚至在4G下都可以调试:

  1. 手机电脑都连上微屁恩
  2. “Dev Settings” 中设置 “Debug server host & port for device”,修改为上面的微屁恩地址(ipsec0遮挡部分)
  3. 在调试菜单中,选择 “Debug JS Remotely”

解决问题

到了这一步,我已经能够看到Log以及打断点进行调试,最后得出的结论是:“服务端的调试结论的确是正确,数据已经顺利拿到了,而是是正确的,长连接也没有问题”。到这里已经可以确认是客户端的锅,而且是这个页面的ListView组件的锅,因为都是用React Native的ListView,为什么其它页面没有问题?

再次分析
React Native 的 ListView 是基于 ScrollView 组件实现的,显示部分异常,应该是ListView里面的ScrollView出了问题,对比其它模块用的 ListView ,发现了一个十分可疑的地方:ListView 组件提供的 “renderScrollComponent” 属性,关于这个这个属性,官方文档是这样说的:

renderScrollComponent function

(props) => renderable

指定一个函数,在其中返回一个可以滚动的组件。ListView将会在该组件内部进行渲染。默认情况下会返回一个包含指定属性的ScrollView。

简单说,这个属性可以让我们自定义ListView的滚动组件,如果不设置的话,就是一个默认的ScrollView作为ListView的滚动组件。

很不凑巧,我们指定了这个属性,因为对于聊天列表,最新的消息内容需要显示在列表的最下方,于是我们使用 react-native-invertible-scroll-view 这个第三方库,将这个默认的ScrollView翻转了过来,实现了新消息一直在底部,有新消息也直接滚动到最底部这样的效果(类似:react-native-gifted-chat)。

证实猜想
要证明上面的猜想很简单,直接去掉ListView中指定的的 renderScrollComponent 方法,然后刷新界面。X同事说:“显示出来了,不过方向是反的”。

解决问题
我们看看这个库是如何将ScrollView翻转过来的,找到核心文件 ‘InvertibleScrollView.js’ ,看到关键代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let styles = StyleSheet.create({
verticallyInverted: {
flex: 1,
transform: [
{ scaleY: -1 },
],
},
horizontallyInverted: {
flex: 1,
transform: [
{ scaleX: -1 },
],
},
});

到这里已经一切了然,这货使用 transform 属性,在垂直/水平方向上翻转分别使用:

1
2
3
transform: [ { scaleY: -1 } ] //垂直翻转
transform: [ { scaleX: -1 } ] //水平翻转

到这里已经确诊了,transform 在P10上出问题了,这个问题也可以在 React Native 的 issues 上找到:

  1. react-native-invertible-scroll-view not working on Huawei Android 7 devices.
  2. always set camera distance on transforms, to default 1280 if 0

已经确认有问题的机型如下:

FRD-AL10(honor 8) EMUI:5.0 android: 7.0
MHA-AL00(Mate9) EMUI:5.0 android:7.0
Huawei P10 VTR-L09, EMUI:5.0 Android 7.0

解决方法有两种:
1)在transform中增加 perspective: 1280 (在我的项目里没有起效,基于 React Native 0.35)

1
transform: [ { scaleY: -1, perspective: 1280 } ]

2)对于Android,使用过时的 {scaleY: -1} 属性,而不是 transform: [ { scaleY: -1 } ],iOS保持不变

1
2
3
4
5
6
7
8
9
10
let styles = StyleSheet.create({
verticallyInverted: Platform.select({
ios: {transform: [{scaleY: -1}]},
android: {scaleY: -1},
}),
horizontallyInverted: Platform.select({
ios: {transform: [{scaleX: -1}]},
android: {scaleX: -1},
}),
});

最后附上修复好的翻转ScrollView: V1sk/react-native-invertible-scroll-view

结语

这一波调试过程十分曲折,希望大家不会遇到这些奇葩问题。另外,评论系统又GG了,继多说停止服务之后,网易云跟帖也停了,评论数据也清了,现在唯有用Disqus了,也是需要 微屁恩 才能看到评论系统~

坚持原创技术分享,您的支持将鼓励我继续创作!