Reactjs 移动反应元件时防止重新初始化

我试图在React Native中设置地图视图的动画，这样当按下它时，它将从滚动视图中的一个元素变成覆盖整个屏幕的地图（包括导航和状态栏）

对于我正在使用的覆盖视图

我通过以下方式实现了这一点：

使用UIManager.measure测量地图位置

激活覆盖并渲染相同的贴图，但现在位于覆盖内

基于测量相对于叠加定位地图

设置贴图大小的动画以覆盖整个屏幕

问题是，当进入/离开叠加时，整个贴图将重新加载，这将有效地扼杀动画的魔力

据我所知，由于我将MapView在VDOM树中移动了相当远的距离，React会杀死它并初始化一个新的MapView。我试图通过将贴图视图作为道具传递给执行动画的组件来避免这种情况。我的想法是，因为道具没有被改变，所以MapView不应该被重新实例化。不幸的是，这没有帮助

我还尝试将MapView包装到另一个组件中，并让shouldComponentUpdate始终返回false。也没用

当我在渲染树中移动贴图视图时，是否有办法防止它重新初始化

我的渲染树如下所示：

var map = <MapView />;

var-map=；

在ScrollView中映射时：

<ScrollView>
   ...some other content...
   {map}
</ScrollView>

…其他一些内容。。。
{map}

在覆盖中时：

<ScrollView>
   ...some other content..
   <Overlay isVisible={true} aboveStatusBar={true}>
      <View style={styles.fullScreen}>
         <Animated.View style={[styles.mapContainer,{top: this.state.topValue, height: this.state.heightValue}]}>
            {map}
         </Animated.View>
       </View>
    </Overlay>
</ScrollView>

…其他一些内容。。
{map}

我认为应该向映射组件添加键属性。这是告诉React两个渲染过程中的特定组件实际上是同一个组件的唯一方法，因此它将对组件重新排序，而不是销毁/重新创建。没有键，如果组件在树中移动，react将始终销毁/重新创建它，因为它不知道它实际上是同一个组件（没有任何东西可以告诉react它是）。键属性在列表/数组中工作，但我认为它也应该适用于更复杂的树重排

请参阅此处的更多详细信息：

请注意，上面的链接是针对react.js而不是react native的，但我相信它应该以完全相同的方式工作。我发现有很多概念/细节没有在react本机教程中解释，但它们在react.js教程中是清楚的（例如关于ref属性的解释）。实际上，作者假设您有react方面的经验（因此我继续学习react.js；）：

发件人：

我们假设您有使用React编写网站的经验。如果没有,， 你可以在React网站上了解它

---

卡拉维拉先生，欢迎来到SO:）请，带上它来赢取你的第一枚闪亮徽章：）好主意，但不幸的是，我无法让它发挥作用。下面是一个例子：如果我删除包装器视图，它会突然工作。（第43行和第45行）钥匙似乎只适用于直系子女。因为我在覆盖组件中移动贴图，所以它不起作用。似乎没有指向正确的内容。我发现这更相关：