Question

我有一个＆＃34;封面＆＃34;我的一个观点的顶部的图像，我喜欢能够模糊出来，因为你将它作为一个很酷的效果滚出视图。

我的状态包含blurRadius属性，我绑定到blurRadius={this.state.blurRadius}组件上的<Image>道具。

我有一个<ScrollView>并且正在监控它与onScroll滚动的位置，我在这里呼叫setState({blurRadius: value}) - value是您与＃39}的距离;我滚动了视图。

我还在滚动视图中设置scrollEventThrottle={30}道具，以便我在用户滚动时定期收到该活动。

问题似乎是blurRadius更新但在显着延迟后 - 并且仅更新到最大值。我错过了什么，以便在每次调用setState时使图像应用新的blurRadius？

可能是图片太大了吗？

Answer 1

您不应该使用setState将任何内容设置为对onScroll的响应，因为这会导致性能下降。原因是整个视图将重新发送每次调用setState，这导致“查看颠簸”。

相反，您应该使用Animated API，因为这会将动画'声明'到本机UI线程，从而避免重新渲染。

Brent Vatne（来自世博会团队）对动画以及动画的具体示例进行了很好的解释，以回应onScroll here

中的ScrollView事件

希望它可以帮助某人： - ）

Answer 2

您可以尝试使用setNativeProps代替setState来查看效果是否有所改善。您只需要提供Image ref。

this.refs.myImage.setNativeProps({ blurRadius: myValue });

缩小图像尺寸也有帮助，因为它不需要模糊尽可能多的像素。