Пытаюсь сделать стандартный лист с юзерами, правда лист может быть очень большой >5000. Столкнулся с такой проблемой, если добавить ListHeaderComponent то изначально рендерится несколько айтемов и идет большая задержка, плюс скрол работает ужасно,
пример с хедером,
пример без хедера. Кто сталкивался с таким? Какие советы можете дать? Может есть более производительные решения для больших листов?
<AnimatedSectionList
initialNumToRender={10}
renderSectionHeader={({ section }) => <SectionHeaderComponent title={section.key} />}
sections={sections}
style={styles.list}
/>
Пример массива секций
[{
title: '',
data: [],
renderItem: () => <ListItemComponent />
}]
class ListItemComponent extends PureComponent {
render() {
return <ListItem avatar>
<Left>
<Thumbnail source={require('../img/img1.png')} />
</Left>
<Body>
<UiText style={{ fontSize: 16, color: '#000' }}>Test</UiText>
<Text note>Test</Text>
</Body>
</ListItem>
}
}
class SectionHeaderComponent extends PureComponent {
render() {
const { title } = this.props;
return <Text>
<UiText>{title}</UiText>
</Text>
}
}
Средний