Question

如果要满足某个条件，我会尝试在组件的componentWillReceiveProps事件中滚动到顶部……但是什么也没发生：

componentWillReceiveProps(nextProps) {
     // some code...

    if (newQuery === query && this.scrollViewRef.current) {
      console.log('Should scroll to top'); // << logs successfully

      this.scrollViewRef.current.scrollTo({
        x: 0,
        y: 0,
        duration: 500,
        animated: true,
      });
    }
  }

我如何为scrollView创建引用的代码段：

class SearchResult extends React.Component {
  constructor(props) {
    super(props);

    this.scrollViewRef = React.createRef();
  }
//...
}

渲染方法：

render () {
   return (
      <ScrollView
        ref={this.scrollViewRef}
        contentContainerStyle={{ marginVertical: 8 }}
      >
    ...
    )
}

我还尝试通过按下按钮手动滚动...效果不佳

有帮助吗？

Answer 1

React Native文档说：

注意：奇怪的函数签名是由于这样的事实，由于历史原因，该函数还接受单独的参数作为options对象的替代项。由于模棱两可（在x之前的y），已弃用此标签，因此不应使用。

如果您还将FlatList与ScrollView一起使用，可以尝试使用scrollToOffset方法吗？

Answer 2

我知道了...

values objects 5.0 b 2.0 a 0.5 e -2.0 c -1.0 d在一个孤立的环境（一个全新的项目）中完美地工作了……

我认为问题可能出在该滚动视图的容器中……我发现父组件也有一个scrollView……一旦删除它，一切就可以正常工作了。

Answer 3

对于那些使用useRef()方法并遇到'xRef.scrollTo' is not a function错误的人，请尝试像xRef.current.scrollTo({[YOUR_PARAMS]})一样使用它。

我不知道这件事current，而且快要疯了。

React Native ScrollView scrollTo函数不起作用

3 个答案: