干货 | 携程机票RN复杂交互实践

作者简介

 

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

前言

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

一、背景

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

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

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

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

二、方案设计

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

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

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

三、技术实现

3.1 手势

对于手势操作RN提供了较为丰富的手势识别库PanResponder，在这些事件API中也不乏存在一些使用中的坑点需要专门去兼容处理。本节主要简单讲述往返双栏的手势实现以及遇到的主要问题：

• Android平台，子View为ScrollView手势交互事件被列表滚动事件拦截打断

• 部分操作场景下，手势事件通知参数不符合预期

这两个问题严重地影响用户的交互体验，针对第一条所导致的问题用户通过手势左右切换的过程中，很容易触发列表的滚动导致手势中断，进而导致手势不跟手以及页面抖动。

在说明解决方案之前，先简单阐述一下React Native PanResponder手势相关API的触发机制。