scrollTo 在动画 ScrollView 上未定义答案

【问题标题】：scrollTo is undefined on animated ScrollViewscrollTo 在动画 ScrollView 上未定义
【发布时间】：2017-02-05 11:13:22
【问题描述】：

当使用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 上工作正常。有没有办法解决这个问题？

【问题讨论】：

标签： react-native

【解决方案1】：

@max23_ 的答案现在可能有效，但不是正确的做法——根据经验，我们永远不应该直接访问私有变量，因为它们经常会发生变化。（编辑：没有不尊重:-)）

由于this pull request，获取包装组件的ref 的新且面向未来的方法是使用getNode() 实用方法，因为访问私有变量（以_ 开头）在未来是不安全的API 更改。

所以，新的做法是

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

然后在调用方法时，做

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

:-)

【讨论】：

在getNode() 上的发现很好。我认为它可以重写为ref = {c => this.myRef = c.getNode()}，这样你就不需要总是调用getNode()。
我实际上尝试过，但得到了一个未定义的错误 - 当时没有时间调试它，但如果你能让它工作，请随时编辑答案:-)
使用动画滚动视图我很难弄清楚这一点，谢谢你的信息。一个警告是 ref = {ref => this.scrollView = ref.getNode()} 对我不起作用，但 this.scrollView.getNode().scrollTo() 工作正常。
scrollToOffset() 对我不起作用，只有 scrollTo()
得到这个 => getNode 不是一个函数

【解决方案2】：

试试这个来获取从Animated.createAnimatedComponent方法返回的组件的ref：

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

那么，调用this.list.scrollTo({x: 0, y: 0}) 应该可以了。

【讨论】：

所以每当我使用这个解决方案时，我在尝试使用 this.setState 时总是会出错。我通过像这样设置 ref 来解决它：ref='scrollRef'，然后通过调用它来使用 scrollTo 函数：this.refs.scrollRef._component.scrollTo
我遇到了同样的问题，我使用 flatList，对我来说路径看起来像 ref._component._listRef._scrollRef

【解决方案3】：

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

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

scrollView = React.createRef();

<ScrollView
  ref={this.scrollView}>

并使用静态方法：

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

编辑：截至 RN 0.62，以下为 no longer necessary

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

scrollView = React.createRef();

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

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

【讨论】：

感谢这个“当前”

【解决方案4】：

只是添加另一个答案，因为“getNode”和“_component”解决方案对我不起作用。我正在使用反应原生 0.57。使用 scrollToOffset 设法使其工作

componentDidMount() {
  this.refs.listRef.scrollToOffset({ offset: 0,  animated: false })
}

render() {
  return (
    <FlatList ref="listRef" ... />
  }
};

【讨论】：

这是动画的 ScrollView 吗？

【解决方案5】：

如果 RN >= 0.59（可能更早）和以下 Ref 设置：

const ScrollViewX = Animated.createAnimatedComponent(ScrollView);

  _scrollView = React.createRef();

<ScrollViewX
      ref={this._scrollView}>

您可以通过这种方式手动滚动动画组件：

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

（ScrollToOffset 已弃用，可能会在 0.6 中删除）

【讨论】：