使用 Expo Router 实现滚动响应的动画标题栏
内容提要
本文介绍了如何使用Expo Router的Stack组件创建一个可重用的AnimatedHeaderScreen组件，该组件可以在屏幕上添加动态过渡元素和颜色动画。通过使用插值和动画，可以实现滚动时的平滑过渡效果。文章还提供了实现的代码示例和用法说明。
延伸解读
为什么必须关闭原生驱动
文章特别提醒，使用 Animated.event 处理滚动事件时，必须将 useNativeDriver 设为 false，否则会报错“_this.props.onScroll is not a function”。这是因为原生驱动只能处理部分样式属性，而本例中动画涉及 backgroundColor 等非兼容样式，必须交由 JavaScript 驱动。开发者若忽略此设置，动画将无法运行。
插值与 clamp 的作用
通过 scrollY.interpolate 将滚动位置映射到样式属性，并设置 extrapolate: 'clamp'，可以确保动画值在输入范围外不再变化。例如背景色在滚动 0 到 50 像素之间渐变，超过 50 像素后保持最终颜色。这避免了滚动过度时出现意外的样式跳变，使过渡更自然。
可选图标的条件动画
对于左右图标，组件仅在传入对应 prop 时才应用动画。代码中通过三元表达式判断，若图标存在，则使用插值控制透明度和位移；否则直接赋值为 0。这样既保证了灵活性，又避免了不必要的动画计算。图标会在滚动 30 到 50 像素时淡入并上移，增强视觉反馈。
组件复用与安全区域适配
AnimatedHeaderScreen 封装了 Stack.Screen 的 header 配置和 ScrollView，使用时只需包裹屏幕内容并传入 title、图标等可选属性。组件内部通过 useSafeAreaInsets 获取底部安全区域，并应用到 ScrollView 的 contentContainerStyle 中，确保内容不被 Home Indicator 遮挡，提升了在不同设备上的兼容性。
Q&A
如何使用Expo Router创建AnimatedHeaderScreen组件？
使用Expo Router的Stack组件，可以创建一个可重用的AnimatedHeaderScreen组件，通过包裹屏幕内容来实现动态过渡效果。
AnimatedHeaderScreen组件的主要功能是什么？
该组件可以在屏幕上添加动态过渡元素和颜色动画，实现滚动时的平滑过渡效果。
如何实现滚动时的平滑过渡效果？
通过使用Animated.Value跟踪用户的滚动位置，并使用插值映射滚动位置到不同的样式属性来实现平滑过渡效果。
在AnimatedHeaderScreen中如何处理滚动事件？
使用Animated.event处理滚动事件，并确保useNativeDriver设置为false，以避免错误。
AnimatedHeaderScreen组件的使用示例是什么？
可以通过将屏幕内容包裹在AnimatedHeaderScreen中，并传入标题和可选图标来使用该组件。
如何自定义AnimatedHeaderScreen组件的样式？
可以通过调整插值和样式属性，修改背景颜色、边框等来实现自定义样式。
