窗口级原生浮层
在 iOS 上使用独立的触摸穿透 UIWindow，在 Android 上使用 Activity DecorView.overlay。浮层位于所有导航容器之上，跨越 Stack、Modal、透明弹窗、半屏面板（formSheet）与底部标签页时绝不会被父视图裁切。
React Native Shared Hero面向 Fabric 的窗口级共享元素过渡。
在两个页面或同一页面的两个状态中用
Skip to content两个组件，共享同一个
两个组件，共享同一个 id
只需在列表页与详情页给两个 <SharedHero> 传入相同的 id。当向前跳转或返回时，原生协调器会自动测量两个视图在窗口坐标系下的位置并在顶层浮层中完成飞行过渡。
tsx
import { Image, Pressable } from 'react-native';
import { SharedHero } from 'react-native-shared-hero';
// 1. 源页面（例如列表或网格卡片）
export function FeedCard({ item, onPress }) {
return (
<Pressable onPress={onPress}>
<SharedHero
id={`photo-${item.id}`}
mode="morph"
style={{ borderRadius: 12, overflow: 'hidden' }}
>
<Image source={{ uri: item.thumbUrl }} style={{ width: 140, height: 180 }} />
</SharedHero>
</Pressable>
);
}
// 2. 目标页面（Stack 推入、Modal、半屏面板或 Tab 详情）
export function PhotoDetailScreen({ item }) {
return (
<SharedHero
id={`photo-${item.id}`}
mode="morph"
motionPath="arc"
spring={{ damping: 22, stiffness: 260, mass: 1 }}
style={{ borderRadius: 24, overflow: 'hidden' }}
>
<Image source={{ uri: item.fullUrl }} style={{ width: '100%', height: 420 }} />
</SharedHero>
);
}实时过渡演练场
在下方切换过渡模式、运动轨迹、弹簧参数与圆角半径，实时预览 react-native-shared-hero 的插值效果并复制对应的 JSX 配置：
原生窗口覆盖层飞行动画的交互式模拟。点击飞行按钮或拖动进度滑块，观察尺寸、圆角、淡入淡出曲线与运动轨迹的变化。
// Source screen
<SharedHero
id="poster-42"
mode="morph"
style={{ borderRadius: 10 }}
>
<Image source={{ uri }} style={styles.thumb} />
</SharedHero>
// Destination screen
<SharedHero
id="poster-42"
mode="morph"
motionPath="arc"
spring={{ damping: 22, stiffness: 260, mass: 1 }}
style={{ borderRadius: 24 }}
>
<Image source={{ uri }} style={styles.heroHeader} />
</SharedHero>