防止在移动react元素时重新初始化

Question

我正在尝试在React Native中动画MapView，以便当它被按下时，它从ScrollView中的元素变为覆盖整个屏幕的地图(包括导航和状态栏)。

对于覆盖视图，我使用react-native-overlay

我已经让它工作了:

1. 用UIManager测量地图位置。测量
2. 激活覆盖并渲染相同的地图，但现在在覆盖内
3. 根据测量
将地图相对于覆盖层进行定位
4. 动画化地图大小以覆盖整个屏幕

问题是，当切换到/从覆盖，整个地图重新加载，这有效地杀死了动画的魔力。

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

我也尝试包装MapView在另一个组件和有shouldComponentUpdate总是返回false。也没用。

当我在渲染树中移动MapView时，是否有办法防止MapView重新初始化?

我的渲染树看起来像这样:

var map = <MapView />;

当地图在ScrollView:

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

:

<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>

Answer 1

我认为您应该为Map组件添加key属性。这是告诉React两个渲染通道中的特定组件实际上是同一个组件的唯一方法，因此它将重新排序组件，而不是销毁/重新创建。如果没有key，如果组件在树中移动，react总是会销毁/重新创建它，因为它不知道它实际上是同一个组件(没有什么可以告诉react它是)。key属性在列表/数组中工作，但我认为它也应该适用于更复杂的树重排。

查看更多详细信息:https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

注意上面的链接是针对react.js而不是react-native的，但我相信它应该以完全相同的方式工作。我发现有很多概念/细节在react-native教程中没有解释，但它们在react.js教程中很清楚(例如关于ref属性的解释)。实际上，作者假设你有react的经验(所以我也继续学习react .js;):

From https://facebook.github.io/react-native/docs/tutorial.html#content:

我们假设你有使用React编写网站的经验。如果不是这样,你可以在React网站上了解它。