scrollTo在动画ScrollView上未定义

Question

当Animated.createAnimatedComponent(ScrollView)用于创建动画时,ScrollView它不再可能使用scrollTo.

const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);

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

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

_this.list.scrollTo is not a function

它在普通的ScrollView上运行良好.有什么方法可以解决这个问题吗？

Answer 1

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

由于这个拉取请求,获取包装组件的新的和面向未来的方法ref是使用getNode()实用程序方法,因为访问私有变量(前缀_)对于将来的API更改是不安全的.

所以,新的做法是

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

然后在调用方法时,做

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

:-)

Answer 2

试试这个从组件返回组件的ref Animated.createAnimatedComponent:

ref={(ref) => this.list = ref._component}

然后,呼叫this.list.scrollTo({x: 0, y: 0})应该工作.

Answer 3

以@jhm 的答案为基础 - 使用React.createRef()@cyqui 提到的自 React 16.3 以来创建组件引用的新推荐方法。

对于普通（注意：非动画）组件，我们可以ScrollView按照推荐的方式简单地创建一个对 的引用：

scrollView = React.createRef();

<ScrollView
  ref={this.scrollView}>

并使用静态方法：

this.scrollView.current.scrollTo({x: number, y: number, animated: true|false})

编辑：从 RN 0.62 开始，不再需要以下内容

但是，在使用Animated组件时，我们正在进入直接操作，这要求我们在调用任何静态方法之前获取组件的本机节点。因此，您最终会得到以下结果：

scrollView = React.createRef();

<Animated.ScrollView
  ref={this.scrollView}>

this.scrollView.current.getNode().scrollTo({x: number, y: number, animated: true|false})