Сбой при выполнении scrollToLocation для SectionList - PullRequest
Новая
       23

Сбой при выполнении scrollToLocation для SectionList

0 голосов
/ 10 января 2019

У нас есть крайний случай в нашем приложении. После того, как пользовательский интерфейс отображается и пользователь пытается прокрутить до раздела, он выдает scrolltoindex should be used in conjunction with getitemlayout or on scrolltoindex failed. Теперь это происходит только тогда, когда он делает это сразу после рендеринга пользовательского интерфейса. 

_scrollToSection = index => {
    setTimeout(() => {
        this.list.scrollToLocation({
            animated: true,
            itemIndex: -1,
            sectionIndex: index,
            viewPosition: 0
        });
    }, 150);
};

Отображение списка разделов: 

        <SectionList
            sections={this.props.sections}
            extraData={this.props.subscriber}
            ref={ref => {
                if (ref) {
                    this.list = ref;
                }
            }}
            automaticallyAdjustContentInsets={true}
            contentInsetAdjustmentBehavior={'automatic'}
            windowSize={100}
            ListHeaderComponent={this.props.header || null}
            ItemSeparatorComponent={() => (
                <Separator
                    style={[mediumStyle.separatorEnd, { backgroundColor: IOS_GREY_02_03 }]}
                />
            )}
            renderSectionFooter={() => <View style={{ height: 17 }} />}
            keyExtractor={(item, index) => index}
            removeClippedSubviews={false}
            stickySectionHeadersEnabled={true}
            renderSectionHeader={({ section }) => (
                <SectionTitle title={section.title} theme={this.props.theme} />
            )}
            renderItem={this._renderItem}
            onEndReachedThreshold={0}
            onEndReached={() => HapticFeedback.trigger()}
            scrollEventThrottle={16}
        />

Я попытался найти причину, но безуспешно нашел только устаревшие и закрытые проблемы без решения. Это случилось с кем-то еще? Как вы это исправили?

UPDATE: Мы придумали решение с постоянными размерами элементов, которое также учитывает коэффициент доступности. Таким образом, у нас был элемент и размер заголовка, который мы могли бы использовать в getItemLayout. Все работало как надо, но SectionList глючит. Когда мы прокручивали до нижних разделов, список сам по себе был нервным без какого-либо взаимодействия. До сих пор лучшим решением для нас было создание списка разделов в собственном коде и использование его вместо списка RN.

1 Ответ

0 голосов
/ 10 января 2019

Вы получаете эту ошибку, потому что scrollToIndex не удалось, и вы не реализовали getItemLayout или onScrollToIndexFailed

getItemLayout в списке разделов настраивать не совсем весело, однако в этом среднем посте рассказывается, как это сделать https://medium.com/@jsoendermann/sectionlist-and-getitemlayout-2293b0b916fb

Они предлагают react-native-section-list-get-item-layout для расчета размеров макета https://github.com/jsoendermann/rn-section-list-get-item-layout

onScrollToIndexFailed проще в настройке, вы можете добавить реквизит onScrollToIndexFailed={(info) => { /* handle error here /*/ }} Вы можете поймать ошибку и затем решить, как вы ее обработаете.

Я бы также добавил проверку, чтобы убедиться, что ваша ссылка на this.list существует до вызова функции scrollToLocation. Как то так. 

_scrollToSection = index => {
    setTimeout(() => {
      if (this.list) {
        this.list.scrollToLocation({
            animated: true,
            itemIndex: -1,
            sectionIndex: index,
            viewPosition: 0
        });
      }
    }, 150);
};
...