干货 | 携程机票RN复杂交互实践
作者简介
前言
本文将主要介绍在携程中文APP国内机票模块中，对往返机票的预定流程改造期间，在React Native中进行复杂动画、手势交互的经验总结，包括复杂交互对于RN页面的性能开销，以及在不断解决问题的过程中总结出来的实践方案。
一、背景
项目背景源自于产品需求。经过产品调研，旧有的往返机票预定分页模式在用户体验中存在以下痛点：
用户需要反复进行信息确认，确认过程中切换页面有较强跳出感；
往返的去程列表和返程列表认知度不高，同时分页模式下往返总价模式理解成本高；
基于这些原因，我们进行往返双栏改版，希望既可以在同一页面中展示信息，又可以去容纳更多信息。相较于旧版分页面展示往返信息的模式，分栏的模式将两程信息展示在同一页面左右分屏。这样可以将返程信息提前曝光，方便用户综合往返程信息高效选择航班，降低决策的费力度。项目上线后，在转化率等业务指标数据上有明显提升。
二、方案设计
项目主要涉及前端页面交互UI改造，将往返程放入同一个页面中以黄金比例分割展示往返内容，通过动画与手势，进行两种状态之间的相互切换。方案的动画模式图如下：
相应的组件层级结构如下图所示：
从粗略的组件层级结构图可以看到，每一个航班卡片都有两种状态。因此相较于原本的往返分页模式，往返双栏需要支撑2倍的数据量，以及近4倍的组件数量。同时涉及手势、动画以及长列表，其中页面中同时存在近二十组不同的动画。这种情况下对于React Native页面而言，其所带来的性能开销问题显得更加突出。
三、技术实现
对于手势操作RN提供了较为丰富的手势识别库PanResponder，在这些事件API中也不乏存在一些使用中的坑点需要专门去兼容处理。本节主要简单讲述往返双栏的手势实现以及遇到的主要问题：
Android平台，子View为ScrollView手势交互事件被列表滚动事件拦截打断
部分操作场景下，手势事件通知参数不符合预期
这两个问题严重地影响用户的交互体验，针对第一条所导致的问题用户通过手势左右切换的过程中，很容易触发列表的滚动导致手势中断，进而导致手势不跟手以及页面抖动。
在说明解决方案之前，先简单阐述一下React Native PanResponder手势相关API的触发机制。
事件捕获阶段，申请成为响应器主要包含以下回调：
// 当用户触摸开始时是否申请成为响应器onStartShouldSetPanResponderCapture// 当用户滑动开始时是否申请成为响应器onMoveShouldSetPanResponderCapture
事件冒泡阶段，申请成为响应器主要包含以下回调：
// 在事件冒泡阶段 当用户滑动开始时是否申请成为响应器onStartShouldSetPanResponder// 在事件冒泡阶段 当用户滑动开始时是否申请成为响应器// 本文项目使用该回调 处理申请响应器onMoveShouldSetPanResponder
响应事件处理回调主要有以下几个：
// 手势开始onPanResponderStart// 手势移动，项目使用该方法作为跟手移动回调onPanResponderMove// 松手TouchUponPanResponderRelease
对于PanResponder手势处理，当存在嵌套关系时，如图所示。
其他用于辅助使用的回调事件主要有以下几个：
// 手势事件被中断交出事件控制权onPanResponderTerminate// 是否交出事件控制权onPanResponderTerminationRequest
当PanResponder绑定的父View包含ScrollView作为子View时，在Android平台上即使响应事件已经交由父View做处理，左右滑动时依然会触发List的滚动。同时当任意一个List触发Scroll时，均会直接中断当前PanResponder的响应事件，触发onPanResponderTerminate交出控制权，同时并不会触发onPanResponderTerminationRequest。
为了解决这一问题，在onMoveShouldSetPanResponder事件回调中，即获得控制权时，执行setNativeProps方法禁用List滚动。然后在触控事件结束之后，释放重置，恢复列表滚动。采用该方案在真机实验中，使用setNativeProps可以直接操作，避免触发页面刷新影响性能，同时也解决了手势事件冲突的问题。
if (Platform.OS === 'ios')return;this.firstTripSectionList.setNativeProps({ scrollEnabled: enable });this.secondTripSectionList.setNativeProps({ scrollEnabled: enable });
另外一个关于手势遇到的问题是，当用户在屏幕快速滑动时从onPanResponderTerminate事件获得的移动参数不可靠与预期不符，此时无论移动方向，事件返回的代表手势移动距离的参数dx均会为0。项目中将动画移动的距离作为滑动方向的依据，当为0时无法判断手势的移动方向。
为了解决这一问题，我们进行了相应的调试排查，发现当用户快速滑动时虽然onPanResponderTerminate拿到的dx不正确，不过在获取控制权时的回调方法onMoveShouldSetPanResponder中可以拿到准确的dx。因此解决这一问题的方案如下，结合dx与tempGestureDirection解决该问题。
在手势左右滑动切换往返程的同时，List中的航班卡片也会以动画的方式在两种状态间切换。另外在页面中很多交互的细节也是通过动画来进行切换，所以页面中存在很多动画交互，仅用于绑定View的差值动画便有十几个。
由于在动画的同时，也会触发数据更新、页面刷新等操作，动画的性能体验也是一大瓶颈，对于动画这一部分主要有以下几个优化方向：
3.2.1 减少参与动画的组件数量
解决这一问题需要进行多种方式的优化。
第一点，从组件层级设计上，组件越少，View的嵌套层级越少，能够带来更高的渲染性能。由于列表中的每一个Item都需要进行动画切换，所以List中实际渲染的Item数量越少越好。在保证列表滑动体验的情况下，当ItemView渲染效率越高，则List的WindowSize阈值可以设置的更小。
对于SectionList或者FlagList的滚动体验优化，可以针对以下参数作调整处理：
windowSize：设置可视区外最大能被渲染的元素的数量
decelerationRate：list滑动速度需注意分平台表现不同
航班卡⽚⾼度保持⼀致，通过实现getItemLayout⽅法减少⾼度计算开销。
对于View的嵌套关系以及渲染耗时，可以使用PerformenceProfile工具进行检测。如下图所示，通过该工具分析组件层级关系，耗时情况，根据结构进行针对性优化。
第二点，在动画结构设计上，上线过程中也经过了多版的迭代。最开始采用的是展开态和折叠态同时进行透明度切换的方式，现在则以zIndex的方式实现。将折叠态覆盖在展开态的卡片上，仅需切换折叠态的透明度即可，这样便可直接省去了将近一半参与动画的组件。
3.2.2 将用户复合操作分解为各个操作元，保持其线性执行
第二个优化方向便是在业务逻辑实现上，尽量保证在动画执行的过程中不进行其他操作。比如当用户第一次进入页面，点击选择了一个去程航班时，会需要同时进行多种操作，包括：更新去程选中态、自动动画展开返程、发送服务更新数据，自动勾选返程航班。
这是用户的一个行为所产生的操作，如果让动画与其他操作同时进行，则非常容易产生掉帧的现象，行程页面卡顿，所以需要在执行动画的过程中不进行其他操作。
3.2.3 状态切换过程不能触发任何render，使用Native驱动动画
相较于JS线程上执行动画，在Native线程上效率更高，其主要区别可从下图中了解。通过Native线程执行动画，可以省去多次在JS线程计算差值动画通过桥接器更新组件View的过程，桥接器的调用次数减少，则也可以提升JS与Native进行交互的通道效率，使得动画效率更高。
使用Native驱动执行动画是收益最直接最明显的优化手段，不过使用Native驱动动画存在一定局限性。Native驱动不能改变布局数据，例如Height、Padding一类的属性，适用于透明度动画Opacity以及位移或者旋转动画，支持transform中的部分属性。
国内机票往返的项目则是使用了transformX属性作为左右滑动的动画值。其启用方式：
Animated.timing(this.animatedValue, {toValue: 0,duration: duration,easing: Easing.linear,useNativeDriver: enableNativeDriver}).start();
collapsable属性
此外在Android平台上由于存在collapsable属性，该属性仅限Android平台。当一个View仅用于布局时，它可能会为了优化而从原生布局树中移除，该属性默认开启。所以默认情况下，Android平台有可能会剔除单纯用于布局的View，进而导致属性开启时，有概率会导致Android平台上组件的动画失效，在使用时需要注意。
分析源码发现，虽然RN框架在createAnimatedComponent时依据this._propsAnimated._isNative来设置collapsable属性，但是并不是在所有场景下都会生效，如果组件没有触发Re-Render则没有去强制设置该属性。
因此对于这类AnimatedView需要显示指定collapsable属性为false，保证其不会在视图中被移除。
四、成果对比
经过优化，将连续快速切换去程、返程状态的手势动画从帧率40帧左右提升到了59帧左右，动画性能得到了很好的改善。优化前后的效果图如下所示。
优化前
优化后
【推荐阅读】
“携程技术”公众号
分享，交流，成长