携程机票RN复杂交互实践

545 阅读9分钟
原文链接: mp.weixin.qq.com

作者简介

  海涛,携程前端开发工程师,负责机票主流程预订、React Native技术栈相关开发工作。

前言

本文将主要介绍在携程中文APP国内机票模块中,对往返机票的预定流程改造期间,在React Native中进行复杂动画、手势交互的经验总结,包括复杂交互对于RN页面的性能开销,以及在不断解决问题的过程中总结出来的实践方案。

一、背景

项目背景源自于产品需求。经过产品调研,旧有的往返机票预定分页模式在用户体验中存在以下痛点:

  • 用户需要反复进行信息确认,确认过程中切换页面有较强跳出感;

  • 往返的去程列表和返程列表认知度不高,同时分页模式下往返总价模式理解成本高;

基于这些原因,我们进行往返双栏改版,希望既可以在同一页面中展示信息,又可以去容纳更多信息。相较于旧版分页面展示往返信息的模式,分栏的模式将两程信息展示在同一页面左右分屏。这样可以将返程信息提前曝光,方便用户综合往返程信息高效选择航班,降低决策的费力度。项目上线后,在转化率等业务指标数据上有明显提升。

二、方案设计

项目主要涉及前端页面交互UI改造,将往返程放入同一个页面中以黄金比例分割展示往返内容,通过动画与手势,进行两种状态之间的相互切换。方案的动画模式图如下:

相应的组件层级结构如下图所示:

从粗略的组件层级结构图可以看到,每一个航班卡片都有两种状态。因此相较于原本的往返分页模式,往返双栏需要支撑2倍的数据量,以及近4倍的组件数量。同时涉及手势、动画以及长列表,其中页面中同时存在近二十组不同的动画。这种情况下对于React Native页面而言,其所带来的性能开销问题显得更加突出。

三、技术实现

3.1 手势

对于手势操作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解决该问题。

3.2 动画

在手势左右滑动切换往返程的同时,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帧左右,动画性能得到了很好的改善。优化前后的效果图如下所示。

优化前

优化后

【推荐阅读】

 “携程技术”公众号

  分享,交流,成长