React-native ScrollView, автоматическое поведение прокрутки - PullRequest
Новая
       29

React-native ScrollView, автоматическое поведение прокрутки

0 голосов
/ 04 ноября 2019

Я пытаюсь реализовать автоматическую прокрутку в ScrollView, но почему-то не могу понять, как правильно это сделать, моя идея, была бы что-то вроде, если я добавляю элемент, а contentSize переполняет ширину ScrollView, которую я должен прокрутитьдо конца, если я удаляю элемент, а contentSize меньше ширины ScrollView, я должен прокрутить до начала.

Вот что у меня есть 

    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      ref={(scrollView) => {
        this.scrollView = scrollView;
      }}
      onLayout={(e) => {
        this.layoutWidth = e.nativeEvent.layout.width;
      }}
      onContentSizeChange={(contentWidth, contentHeight) => {
        this.scrollView.scrollTo({
          x: contentWidth > this.layoutWidth ? contentWidth + this.layoutWidth - width : 0,
          y: 0,
          animated: true,
        });
      }}>
      {contacts.map((contact) => (
        <SelectedContacsItem
          contact={contact}
          onRemoveContactPress={onRemoveContactPress}
          key={contact.id}
        />
      ))}
    </ScrollView>

Это не такРаботая с процессом удаления элементов, на последних элементах (когда содержимое становится меньше, чем представление), он перемещает содержимое в случайные позиции, я добавил реквизит onScroll и оттуда наблюдал журналы, и кажется, что проблема в contentOffSet, потому что онимеет случайные значения (иногда отрицательные значения, иногда большие числа), но не уверен, как его решить.

1 Ответ

1 голос
/ 07 ноября 2019

Я делаю что-то подобное до недели, и я рекомендовал вам (как и мне) отказаться от ScrollView и map в этом случае 

<FlatList
   ref={ref => this.flatListRef = ref}
   horizontal
   data={contact}
   extraData={this.state}
   keyExtractor={(item, index) => index}
   renderItem={({ item, index }) => <SelectedContacsItem
      contact={item}
      onRemoveContactPress={onRemoveContactPress}
      key={item.id}
      index={index}
    />}
/>

И функции onRemoveContactPress дескрипторпрокрутка со свойством scrollToIndex (не забудьте передать index) 

onRemoveContactPress = (index) => {
    this.flatListRef.scrollToIndex({ animated: true, index: index });
}
  • , если scrollToIndex не прокрутить до нужного индекса, попробуйте изменить индекс на другое(«поиграйте» с этим)
  • в моем случае, например, это в направлении RTL, поэтому это выглядит так: index: this.state.contact.length - index - 1
...