scrollTo 在动画 ScrollView 上未定义

问题描述

当使用 Animated.createAnimatedComponent(ScrollView) 创建动画 ScrollView 时，不能再使用 scrollTo.

When using Animated.createAnimatedComponent(ScrollView) to create an animated ScrollView it's not longer possible to use scrollTo.

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);

<AnimatedScrollView ref={(ref) => this.list = ref}>
  <View style={{height: 1000}} />
</AnimatedScrollView>

调用 this.list.scrollTo({x: 0, y: 0}) 会出现以下错误:

Calling this.list.scrollTo({x: 0, y: 0}) gives the following error:

_this.list.scrollTo 不是函数

它在普通的 ScrollView 上工作正常.有什么办法可以解决这个问题吗?

It works fine on a normal ScrollView. Is there any way to solve this?

推荐答案

@max23_ 的答案现在可能有效，但不是正确的方法 - 根据经验，我们永远不应该直接访问私有变量因为这些经常会发生变化.(没有不尊重:-))

@max23_ 's answer might work for now, but is not the correct way of doing it - as a rule of thumb, we should never access private variables directly as these are often subject to change. (edit: no disrespect :-) )

由于这个拉取请求，新的、面向未来的方式获取封装组件的 ref 是使用 getNode() 实用程序方法，因为访问私有变量(以 _ 开头)在将来是不安全的API 更改.

Due to this pull request, the new and future-proof way of getting the wrapped component's ref is to use the getNode() utility method, as accessing private variables (prepended with _) is not safe from future API changes.

所以，这样做的新方法是

So, the new way of doing it is

ref={c => (this.myRef = c)}

然后在调用方法时，做

this.myRef.getNode().scrollTo({
  y: 0,
  animated: true,
});

:-)

这篇关于scrollTo 在动画 ScrollView 上未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！