Блог

Главная - Вопросы по программированию - почему snapToInterval не работает для более длинных массивов в плоском списке?

почему snapToInterval не работает для более длинных массивов в плоском списке?

#javascript #reactjs #react-native

Вопрос:

по какой-то причине snapToInterval он не щелкает должным образом

код:

 const ITEM_HEIGHT=60
   <FlatList
    data={Array(150)
      .fill('')
      .map((_, index) => ({ key: index, title: index.toString() }))}
    renderItem={({ item }) => (
      <View style={{ height: ITEM_HEIGHT, alignItems: 'center', justifyContent: 'center' }}>
        <Text >{item.title}</Text>
      </View>
    )}
    getItemLayout={(data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index })}
    initialScrollIndex={21}
    initialNumToRender={10}
  />

и вот как это выглядит:
введите описание изображения здесь

как мне это исправить?

Ответ №1:

вы должны установить

snapToInterval

опора на высоту вашего предмета «60». вам не нужен getItemLayout, если вы не хотите использовать методы snaptoindex или scrollToItem flatlist. кроме того, я думаю, что вы забыли установить значение ITEM_HEIGHT в своей опоре getItemLayout.

Комментарии:

1. извините, я забыл добавить это к вопросу, но теперь я это исправил

Ответ №2:

Я решил проблему отсюда

просто добавьте snapToOffsets вот так:

 const ITEM_HEIGHT=60

<FlatList
    data={Data}
    renderItem={({ item }) => (
        <View
            style={{
                height: ITEM_HEIGHT,
                alignItems: 'center',
                justifyContent: 'center',
            }}>
            <Text style={{ fontWeight: 'bold',color:'white' }}>{item.title}</Text>
        </View>
    )}
    keyExtractor={(_, index) => index.toString()}

    getItemLayout={(_, index) => {
        return { length: ITEM_HEIGHT, offset: ITEM_HEIGHT* index, index };
    }}
    initialScrollIndex={21}
    showsVerticalScrollIndicator={false}
    initialNumToRender={3}
    windowSize={9}
    snapToOffsets={Data.map((x, i) => (i*ITEM_HEIGHT))}
/>
Метки: