Переход общего элемента в React-Native

#javascript #react-native

Вопрос:

У меня возникла проблема, когда я попытался переключиться между двумя экранами. Я ожидал чего-то подобного, но получил совсем другое. Поэтому я создал простой дизайн, чтобы протестировать его, но я не могу понять, как я могу достичь конечного результата? Я загружу видео. Поэтому я добавил только две вещи на свою домашнюю страницу и страницу сведений, где находится изображение.

Вот мой элемент ShareELement на моей главной странице

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

Вот мой общий элемент в моей странице сведений

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

А также я добавил это в свою страницу сведений

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

Итак, мой окончательный результат таков

введите описание изображения здесь

Ожидал чего-то вроде

введите описание изображения здесь

Извините за мой плохой английский!

Комментарии:

1. на MainPage итс <SharedElement id="iamge"> , в то время как на странице сведений, <SharedElement id={"image"}> Идентификаторы разные

2. Они такие же прямо сейчас

3. Можете ли вы поделиться своей версией react-navigation