Question

我试图实现屏幕过渡效果，当用户点击Box组件（在ScrollView内）时，图像将scale并移到顶部，Airbnb有一个很好的例子：

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

我知道如何实现动画部分，但我遇到的问题是布局，如果我试图缩放并移动到顶部的图像在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组件上调用它，而不是在您围绕它定义的任何包装器上调用它。

使用React Native实现缩放屏幕转换？

1 个答案: