react-navigation-shared-element 不工作

Question

我正在尝试实现 react-navigation-shared-element 当我点击一张卡片时我想显示一个流畅的导航。

我有 2 个屏幕，一个是 Home，在 BottomTabNavigator 中，另一个在 Stack Navigator 中，我称之为 MainNavigator

所以我将我的图像包装在卡片和发布详细信息屏幕中，如下所示：

<SharedElement id={`item.${ad?._id}.photo`}>
   <CarImage
     avatar
     ad={ad}
     postId={ad?._id}
     imageStyle={styles.imageStyle}
     iconsSize={'normal'}
   />
</SharedElement>

还有像这样的细节

<SharedElement id={`item.${post?._id}.photo`}>
     <View>
       <MediaCarousel ad={post} showImage={showImage} />
     </View>
   </SharedElement>

在 Main Main Stack 中我有这个

const MainStack = createSharedElementStackNavigator();

  return (
    <NavigationWrapper>
      <MainStack.Navigator screenOptions={mainOptions}>
        ...
        <MainStack.Screen
          name="PostDetails"
          component={PostDetails}
          sharedElements={(route) => {
            const { adId } = route.params;
            return [`item.${adId}.photo`];
          }}
        />

为什么那不起作用，是因为我的主屏幕在 BottomTabNavigator 中，而 PostDetails 在 StackNavigator 中吗？