我想使用滚动到

Question

我在 React Native 中做一个项目，我想设置我的ScrollView位置。所以我搜索，我发现我们应该用scrollTo做到这一点，但我有一个错误：

TypeError: Cannot read property 'scrollTo' of undefined

我的代码：

export default class Index_calendar extends Component {
 componentDidMount() {
   const _scrollView = this.scrollView;
   _scrollView.scrollTo({x: 100});
 }
 render() {
   return (
     <ScrollView ref={scrollView => this.scrollView = scrollView}>
       {this.renderCalandar()}
     </ScrollView>
   );
 }
}

Answer 1

您可以使用

InteractionManager来解决此问题。例如

InteractionManager.runAfterInteractions(() => this.scroll.current.scrollTo({ x }));

Answer 2

为什么不在渲染方法中直接滚动呢？

export default class Index_calendar extends Component {
constructor(props) {
   super(props);
   this.scrollView = null;
}
render() {
   return (
   <ScrollView ref={scrollView => {
       //Sometimes ref can be null so we check it. 
       if(scrollView !== null && this.scrollView !== scrollView){
           this.scrollView = scrollView
           scrollView.scrollTo({x: 100});
       }}>
       {this.renderCalandar()}
  </ScrollView>
 );
}
}

Answer 3

我找到了解决方案！ 我们需要像这样使用 setTimeout：

setTimeout(() => {
    this.scrollView.scrollTo({x: 100});
}, 1);

Answer 4

你似乎做了正确的参考。但我建议初始化引用并使其不易出错：

export default class Index_calendar extends Component {
 constructor(props) {
   super(props);
   this.scrollView = null;
 }
 componentDidMount() {
   const _scrollView = this.scrollView;
   if (_scrollView) {
     _scrollView.scrollTo({x: 100});
   }
 }

Answer 5

InteractionManager.runAfterInteractions(() => {
    this.scrollRef.scrollTo({
      x: 0,
      y: 0,
      animated: true,
    });
  });

这对我有用，将滚动重置到顶部