GetItemLayout в React-Native FlatList
Я пытаюсь использовать функцию scrollToIndex для реактивного плоского списка. То, что я ожидаю, будет представлением списка алфавита. Также используйте scrollToIndex, мне нужно установить свойство getItemLayout компонента flatlist. Я визуализировал элементы с тем же алфавитом, что и элемент в родительском плоском списке, и отображал элементы внутри дочерних плоских списков, поэтому высота элементов родительского плоского списка различается. Проблема в том, что если я даю поддержку getItemLayout, это дает мне ошибку, как показано ниже.
Нарушение инварианта: Нарушение инварианта: Нарушение инварианта: Нарушение инварианта: Не следует оценивать кадры, если предоставляется функция измерения показателей
<FlatList data = {this.cityList}
renderItem = {this.renderCityGroup}
style = {styles.cityList}
keyExtractor = {(item, index) => item + index}
getItemLayout = {(data, index) => {
return {
length: data.height,
offset: data.total
}
}}
ref = {ref => this.cityListRef = ref}
/>
Это мой текущий код.
Ответы 1
В вашем случае это достаточно просто. Внутри data находятся ваши предметы. Итак, если вы не изменяли этот массив целенаправленно, чтобы он имел свойство height и total, это вообще не сработает.
Вдобавок к этому offset — это не общая высота всех элементов, а высота всех элементов в сумме что было раньше выданного элемента.
Пример:
Реагировать на собственные запросы, ему нужен элемент с индексом 3, а наши элементы имеют высоту 10, 20, 30 и 40.
Для третьего элемента offset вам нужно добавить «ноль», первый и второй, чтобы получить «начальную координату y» (или x зависит от направления списка). Для length просто укажите высоту вашего элемента, которая в нашем случае будет равна 40.
Ваш окончательный возвращаемый объект должен выглядеть примерно так.
return {
index: index,
/*
You need to implement the two functions below so they actually return
what I described above.
*/
length: getItemHeight(index),
offset: getItemOffset(index),
}
Если кому-то нужна помощь с реализацией, оставьте комментарий, и я могу дать вам подсказку :).
Хотя есть еще несколько подводных камней. Команда реагирования либо допустила ошибку, либо почему-то считает забавным (или может быть действительно полезным, я понятия не имею) иногда запрашивать элемент с индексом -1, которого, по крайней мере, у меня нет. Для этого особого случая я добавляю этот код перед кодом, который я разместил выше:
// New, negative index preventing code
if (index === -1) return { index, length: 0, offset: 0 };
// Old code
return {
index: index,
length: getItemHeight(index),
offset: getItemOffset(index),
}
ПРИМЕЧАНИЕ: Если все ваши элементы имеют одинаковую высоту, весь расчет будет на способ проще. Я был бы просто:
return {
index,
length: itemHeight, // itemHeight is a placeholder for your amount
offset: index * itemHeight,
};