Question

在我当前的项目中，我在SectionList中具有拖放功能。为方便起见，当用户在顶部或底部屏幕上拖动项目时，我将SectionList滚动到上/下自动滚动。

由于scrollTo函数在SectionList中不是公开的，因此我将其存档。

requestAnimationFrame
按增量距离滚动SectionList（例如5个像素）

const listRef =
      this._sectionList._wrapperListRef &&
      this._sectionList._wrapperListRef.getListRef();
    if (listRef) {
      listRef.scrollToOffset({offset, animated: false});
    }

它在iOS上可以完美运行，但是在Android上，上下滚动时，该节的标题会很不方便。有关详情，请参见下面的视频。

我在Google中进行了搜索，深入研究了本机ScrollView.js代码，并尝试打印MessageSpy消息。但是我找不到什么错误的代码。

有人对我的案子有任何想法吗？

我已在本文中关注并打印调试。但是，对我来说，要完全了解如何找出问题的原因太困难了。

文章链接： https://medium.com/@jondot/debugging-react-native-performance-snoopy-and-the-messagequeue-fe014cd047ac

下面是我的复制代码。希望它有用。

import React, {PureComponent} from 'react';
import {Text, View, SectionList} from 'react-native';

export class Foo extends PureComponent {
  componentDidMount() {
    let offset = 5;
    let step = 5;
    setTimeout(() => {
      this.timer = setInterval(() => {
        offset += step;
        if (offset >= 300 || offset <= 0) {
          step = step * -1;
        }
        this.scrollToOffset(offset, false);
      }, 150);
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  scrollToOffset = (offset, animated) => {
    const listRef =
      this._flatList._wrapperListRef &&
      this._flatList._wrapperListRef.getListRef();
    if (listRef) {
      listRef.scrollToOffset({offset, animated});
}
  };

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'red'}}>
        <SectionList
          ref={ref => (this._flatList = ref)}
          renderItem={({item, index, section}) => (
            <View style={{height: 150, padding: 8}}>
              <Text key={index}>{item}</Text>
            </View>
          )}
          renderSectionHeader={({section: {title}}) => (
              <Text
                style={{
                  fontWeight: 'bold',
                  height: 50,
                  backgroundColor: 'white',
                }}>
                {title}
              </Text>
          )}
          sections={[
            {
              title: 'Title1',
              data: ['item1', 'item2', 'item3', 'item4', 'item5', 'item6'],
            }
          ]}
          keyExtractor={(item, index) => item + index}
          stickySectionHeadersEnabled
        />
      </View>
    );
  }
}

export default Foo;

视频错误演示。 https://youtu.be/sOC-7H4t6NM

如何在React Native的SectionList中实现自动滚动顶部/底部？

0 个答案: