react-native - 如何从一个视图中为组件设置动画以降低 DOM？

Question

我正在写一个扑克牌游戏。我想将一张卡片从 Handfan 动画到 cardTable。一旦卡片离开粉丝视图，它就会消失。我怎样才能将它平滑地动画到显示的中间，在 DOM 中会更高吗？

我虽然也许它适用于 react-native-portal？

这是卡片：

return (
      <View style={styles.outerContainer}>
        <Animated.View style={[styles.playerHandContainer, { width: containerAnimValue.x, //+ widthOffset, 
                              height: containerAnimValue.y }]}>
        {cards.map((card, idx) => {
          const { suit, number } = card

          const { x, y, angle } = coords[idx]
          const originalIndex = originalCards.indexOf(JSON.stringify(card))
          // const styleObject = { left: x + leftOffset, top: y, transform: [{ rotate: Math.round(angle) + 'deg' }]}
          const translationAnimValue = translationAnimationValues[originalIndex]

angle, number, originalIndex')
          const styleObject = { left: translationAnimValue.x, top: translationAnimValue.y, 
                                transform: [{ rotate: spins[originalIndex] }]}
          // the list is necessary because it doesn't give you the same results if you put the object directy in the jsx curlies
          return <AnimatedClassCard onPress={() => this.cardOnPress(card, cards, idx, coords, width, height)} 
                                    card={{ suit, number }} key={originalIndex} style={[styles.playerCards, styleObject]}
                                    renderCard={renderCard}/>

                }
            )
        }
        </Animated.View>
      </View>

卡片应该刚刚从手扇容器中移出到主容器中而不会消失。