react-native-collapsible-tab-view点击切换标签响应慢滑动流畅问题

使用react-native-collapsible-tab-view开发时遇到标签切换性能异常：

• 手势滑动切换标签全程流畅无卡顿
• 点击顶部标签栏指定项触发切换时性能极差，切换动画掉帧明显
• 问题效果演示：
  

该问题是组件默认配置未做点击场景的性能适配导致，核心诱因有三点：

• 点击触发切换时，组件默认会同步计算所有标签页的平移动画进度，未做非激活页的渲染冻结，动画执行期间JS线程需要同时处理多个标签页的布局、状态更新，抢占动画帧资源
• 未开启懒加载配置的情况下，所有标签页的列表内容会全程参与渲染，点击切换瞬间的重渲染量级远大于滑动切换场景
• 部分开发者直接使用React Native原生导出的ScrollView/FlatList作为标签页滚动容器，没有使用组件库封装的滚动组件，导致滚动位置同步逻辑重复触发重渲染

按以下顺序调整配置即可解决卡顿：

1. 根组件添加性能优化配置

import { CollapsibleTabView } from 'react-native-collapsible-tab-view';
import { Easing } from 'react-native';

<CollapsibleTabView
  // 缩短点击切换动画时长，使用更平缓的缓动曲线减少掉帧感知
  animationConfig={{
    duration: 200,
    easing: Easing.out(Easing.quad),
  }}
  // 开启懒加载，仅首次进入对应标签时才渲染页面内容
  lazy
  // 预加载相邻1个标签页，平衡切换流畅度与渲染压力
  lazyPreloadDistance={1}
  // 移除超出可视区域的视图，减少动画期间的渲染节点数
  removeClippedSubviews={true}
  // 动画使用原生驱动，不占用JS线程资源
  useNativeDriver={true}
/>

2. 所有标签页内的滚动容器必须从组件库引入，不要使用React Native原生导出的滚动组件

// 正确引入方式
import { ScrollView, FlatList, SectionList } from 'react-native-collapsible-tab-view';

注意：混用原生滚动组件和组件库封装的滚动组件，除了卡顿外还可能触发头部折叠位置不同步、滚动偏移异常等问题，需统一使用组件库导出的滚动组件。
3. 安卓端额外优化：在项目android/app/build.gradle中开启硬件渲染加速配置

android {
  defaultConfig {
    renderscriptTargetApi 21
    renderscriptSupportModeEnabled true
  }
}

配置完成后重新打包验证，点击标签切换帧率可稳定在60fps，流畅度与滑动切换无差异。

内容的提问来源于stack exchange，提问作者MURARI Yadav