Question

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

对于叠加视图我正在使用react-native-overlay

我有点工作：

使用UIManager.measure
激活叠加层并渲染相同的地图但现在位于叠加层内
根据测量值将地图相对于叠加层定位
动画地图大小以覆盖整个屏幕

问题在于，当进入/从叠加时，整个地图会重新加载，从而有效地杀死了动画的魔力。

据我所知，由于我将MapView移动到VDOM树中很远，React将其杀死并进入新的。我试图通过将MapView作为prop传递给执行动画的组件来避免这种情况。我的想法是，由于不改变道具，因此不应重新实例化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属性在列表/数组中有效，但我认为它也适用于更复杂的树重新排列。

在此处查看更多详情：https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

请注意，上面的链接适用于react.js不反应原生，但我相信它应该以完全相同的方式工作。我发现有很多概念/细节没有在react-native教程中解释，但是它们在react.js中很清楚（例如关于ref属性的解释）。实际上作者认为你有反应经验（所以我继续学习React.js）：

来自https://facebook.github.io/react-native/docs/tutorial.html#content：

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

移动反应元素

1 个答案: