android studio 列表刷新_携程机票双栏列表页设计改版（技术实现篇）

前言

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

背景

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

•用户需要反复进行信息确认，确认过程中切换页面有较强跳出感•往返的去程列表和返程列表认知度不高，同时分页模式下往返总价模式理解成本高

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

项目上线后，在转化率等业务指标数据上有明显提升。

方案设计

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

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

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

技术实现

手势

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

•Android平台，子View为ScrollView手势交互事件被列表滚动事件拦截打断•部分操作场景下，手势事件通知参数不符合预期

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

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