проблемы с производительностью плоского списка React-Native с более чем 100 элементами списка - PullRequest
Новая
       1

проблемы с производительностью плоского списка React-Native с более чем 100 элементами списка

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

Я пытаюсь использовать RN flatlist, чтобы показать большой список имен контактов (более 100 наименований).Я получаю следующее предупреждение:

VirtualizedList: у вас большой список, который обновляется медленно - убедитесь, что ваша функция renderItem отображает компоненты, которые соответствуют рекомендациям по производительности React, таким как PureComponent, shouldComponentUpdate и т. Д.

Некоторые анимированные элементы пользовательского интерфейса становятся очень вялыми, когда в списке содержится более 50 элементов, однако медлительность становится намного лучше, когда я прокручиваю до конца списка внизу

Я собираю все контакты за один раз и сохраняю их в массиве в хранилище с избыточностью.Я пытался использовать реквизит, как initialNumToRender, но не могу улучшить производительность.Что я могу сделать, чтобы улучшить свой список?Раньше я никогда не использовал RN FlatList, поэтому любые советы будут полезны

Вот мой список связанных кодов: 

renderRow = ({item}) => {

 return (
  <ListItem
   title={item.firstName}
   chevronColor={colors.tertiary}
  />
 )
}


  <FlatList
   data={this.props.contacts}
   renderItem={this.renderRow}
   keyExtractor={item => item.id}
   initialNumToRender={10}
   removeClippedSubviews={true}
  />

this.props.contacts - массив контактных объектов в хранилище редуксов

Ответы [ 2 ]

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

В итоге я реализовал recyclerlistview и следовал этому учебному пособию , в котором объяснялось, как заставить его работать, поскольку документации не хватает.Его рабочие мили лучше, чем плоский список.Очень быстро и плавно.

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

Вы можете следовать этим реализациям кода.Для VIEWABILITY_CONFIG перейдите по этой ссылке 

const VIEWABILITY_CONFIG - {
  minimumViewTime: 300,
  viewAreaCoveragePercentThreshold: 100,
  waitForInteraction
}
const yourItemHeight = 108;
class yourClass extends React.PureComponent
...

_getItemLayout(data, index) {
return { lenght: yourItemHeight, offset: yourItemHeight * index, index }
}
 <FlatList
   data={this.props.contacts}
   renderItem={this.renderRow}
   keyExtractor={item => item.id}
   getItemLayout: {this._getItemLayout}
   initialNumToRender={10} // Vary According to your screen size take a lumsum according to your item height
   removeClippedSubviews={true}
   viewabilityConfig={VIEWABILITY_CONFIG}
  />
...