使用React Native实现缩放屏幕过渡？

Question

我试着去实现一个屏幕过渡效果，当用户点击一个框组件（滚动型内），图像将scale并移动到顶部，制作的Airbnb有一个很好的例子：

Airbnb scale transition

<ScrollView> 
     <Box /> // onPress the scaleImage comp should move to top screen 
     <Box /> // regardless of scroll position 
     <Box /> 
     <Box /> 
    ... 
    </ScrollView> 

    <Animated.Image 
     style={styles.scaleImage} 
     source={this.state.activeImage} /> 

我知道如何实现这个动画的一部分，但问题是我有布局，如果Im试图缩放和移动到顶部的图像在ScrollView中，我如何确定距离到顶部。

Answer 1

您可以尝试使用React Native的measure函数。您可以给它任何本地组件（View,ListView,Image等），它会为您提供该组件的偏移量（包含它的原始视图），其页面（屏幕边框）和宽度/高度最快将在渲染完成后（或立即，如果渲染已经完成）回调

为了让您的图像组件的引用，其定义为：

<Image ref="myImage" /*...*/ /> 

然后，你的组件中班级，你可以这样做：

this.refs.myImage.measure((frameX, frameY ,width, height, pageX, pageY) => { 
    //do stuff with the measurements 
}) 

就你而言，你可能会想要使用pageX和pageY，因为它们会给你的图像的绝对位置。请记住，该函数仅适用于本地组件，而不适用于用户定义的组件，因此您应该在实际的Image组件上调用它，而不是在您定义的任何包装上。