基于navigation传参的练习页如何结合react-swipeable-views使用

不需要推翻现有基于navigation传参的跳转链路，只需把react-swipeable-views的使用边界放在练习详情页内部，即可实现和现有业务的完全兼容，不需要硬套官方demo中同页顶部tab切换的实现模式。

• 保留原有列表页逻辑：当前列表渲染、点击卡片触发跳转的代码不需要任何修改，仅需在原有navigation.navigate传参时，额外把当前页面渲染的全量练习数组exerciseHistories和初始选中的练习ID一起传给详情页，替换原先只传单条练习数据的传参方式。

  传参示例：原传参为{ exerciseId: selectedExercise.id }，调整后为{ exerciseList: exerciseHistories, initialExerciseId: selectedExercise.id }

• 初始化详情页的滑动容器：在详情页中引入SwipeableViews作为内容容器，根据navigation传入的参数，匹配出初始选中练习在全量数组中的下标，设置为滑动视图的初始激活索引，保证用户从列表点击哪条练习进入，打开详情就正好展示对应内容，不会出现内容错位。
• 复用现有详情组件：在滑动容器内部循环遍历传入的全量练习数组，每一项都渲染你现有的「练习详情+数据记录」组件，传入对应练习的数据即可。原有的记录保存、交互逻辑完全不需要修改，每个滑动展示的页面都是功能完整的练习详情。
• 适配原有navigation逻辑：在滑动容器的onChangeIndex回调中，把当前滑动到的练习ID通过navigation.setParams同步更新到页面参数中，所有原来依赖页面参数的逻辑（比如页面标题设置、数据上报、返回逻辑判断）都可以正常运行，不需要额外改造。

详情页核心实现参考代码：

// 从路由参数获取传入的练习列表和初始选中项
const { exerciseList = [], initialExerciseId } = route.params;
// 计算初始激活的滑动视图索引
const initialIndex = exerciseList.findIndex(item => item.id === initialExerciseId);
const [currentIndex, setCurrentIndex] = useState(initialIndex);

return (
  <SwipeableViews
    index={currentIndex}
    onChangeIndex={setCurrentIndex}
  >
    {exerciseList.map(exercise => (
      // 直接复用现有支持数据记录的练习详情组件
      <ExerciseDetailView key={exercise.id} exercise={exercise} />
    ))}
  </SwipeableViews>
)

• 不要把滑动组件嵌在列表页实现“滑动跳详情”：这种方式会完全打乱navigation的栈结构管理，反而需要重构大量跳转逻辑，和你原本基于navigation的设计思路相悖。
• 不要照搬官方demo的顶部tab绑定逻辑：官方demo的场景是同一页面内的模块切换，不依赖外部传参做视图初始化；你的场景是“从列表进入详情后，在关联练习间做顺滑滑动切换”，只需要把外部传入的初始值和滑动索引做绑定，即可完全兼容现有逻辑。

整个流程下原有跳转链路完全保留：列表点击触发navigation入栈详情页，内部滑动切换相邻练习的过程不会新增导航栈记录，用户点击返回依然直接回到练习列表，所有原有的练习数据记录功能都可以正常复用。

内容的提问来源于stack exchange，提问作者Bruce Mathers