如何在React Native的ScrollView/FlatList中实现翻页切换效果

该需求完全可以实现。React Native 官方提供的基础 ScrollView 没有内置iBooks风格的翻页过渡相关参数，因此你在官方文档中找不到对应配置是正常情况，你可以通过社区组件或者自定义动画两种方式完成实现。

方案1：使用社区成熟组件（推荐） #

官方维护的react-native-pager-view组件已经内置了iBooks同款的页面卷曲翻页效果，无需自行实现复杂动画，适配性和性能都经过验证，是最优先的选择。
示例用法如下：

import PagerView from 'react-native-pager-view';

const BookReader = () => {
  return (
    <PagerView
      style={{ flex: 1 }}
      initialPage={0}
      // 核心属性，设置为pageCurl即可开启翻书卷曲效果
      transitionStyle="pageCurl"
      orientation="horizontal"
    >
      {/* 按顺序插入所有阅读页内容 */}
      <View key="page-1"><Text>第一页内容</Text></View>
      <View key="page-2"><Text>第二页内容</Text></View>
      <View key="page-3"><Text>第三页内容</Text></View>
    </PagerView>
  )
}

方案2：基于ScrollView自定义实现 #

如果业务要求必须基于基础ScrollView开发，可以通过以下步骤自行实现模拟翻页效果：

• 给ScrollView开启pagingEnabled={true}属性，保证每次滚动结束后刚好停留一整页
• 监听onScroll事件，实时获取滚动偏移量，计算当前页面的滚动进度
• 结合Animated动画库，根据滚动进度给当前页和下一页添加3D变换效果：包括绕Y轴旋转、透明度变化、边缘阴影渐变，模拟纸张翻折的视觉效果
• 页面边角的翻折效果可以通过自定义SVG或者渐变遮罩实现，随滚动进度动态调整折角大小和位置

• 翻页卷曲动画的性能开销比普通平移动画高，建议给页面做懒加载处理，避免一次性渲染过多内容导致卡顿
• 要注意处理滚动边界判断，第一页禁止左滑、最后一页禁止右滑，避免出现无效的翻页动画
• 如果阅读器有长按选字、笔记标注等功能，需要做好手势冲突处理，避免翻页手势和操作手势互相干扰

内容的提问来源于stack exchange，提问作者Desmoline Awa