Bọc bất kỳ view nào trong
id Chỉ cần gắn cùng một id cho hai <SharedHero> ở màn hình danh sách và màn hình chi tiết. Khi bạn chuyển màn hình hoặc bấm quay lại, bộ điều phối (coordinator) dưới tầng native sẽ tự đo tọa độ trên window của cả hai view và cho phần tử bay mượt giữa hai vị trí.
import { Image, Pressable } from 'react-native';
import { SharedHero } from 'react-native-shared-hero';
// 1. Màn hình nguồn (ví dụ: một ô trong danh sách hoặc lưới ảnh)
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. Màn hình đích (stack push, modal, sheet hoặc tab chi tiết)
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>
);
}Hãy thử chỉnh mode, motionPath, thông số spring và độ bo góc (borderRadius) ngay bên dưới để xem cách react-native-shared-hero nội suy chuyển động và sinh ra đoạn JSX tương ứng:
Mô phỏng trực quan chuyển động trên lớp phủ window. Bấm nút bay hoặc kéo thanh tiến trình để quan sát cách khung hình, độ bo góc, độ mờ và quỹ đạo phối hợp với nhau.
// 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>