React Native SharedElement页面跳转过渡效果与预期不符求助

修复步骤 #

1. 修正共享元素ID不匹配问题
   你当前主页SharedElement的id为拼写错误的iamge，和详情页声明的idimage、共享元素配置里的id完全不一致，导致框架无法识别到两个页面对应的共享元素，所以只会触发普通的页面跳转效果，没有过渡动画。
   将主页的SharedElement id修改为正确的image即可：

<SharedElement id="image">
  <Image
    source={images.bannerBg}
    resizeMode="cover"
    style={{
      width: "100%",
      height: "100%",
      borderRadius: 20,
    }
  />
</SharedElement>

2. 调整动画配置
   你当前详情页的共享元素配置指定了animation: "fade-in"，该配置只会触发淡入效果，不会触发预期的位移、缩放过渡。删除这个动画配置，使用框架默认的过渡效果即可实现图片从小图到大图的平滑变形过渡：

PlantDetail.sharedElements = (route, otherRoute, showing) => [
  { id: "image" },
];

3. 可选适配（圆角过渡异常时添加）
   如果修改完前两项后，图片的圆角在过渡过程中没有平滑变化，可以在共享元素配置中添加resizeMode: "cover"和Image组件的resizeMode保持一致，确保过渡过程中样式属性的同步变化。

内容的提问来源于stack exchange，提问作者Hristo Ivanov