@Coder321

Странное поведение SectionList в React Native?

Пытаюсь сделать стандартный лист с юзерами, правда лист может быть очень большой >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>
    }
}
  • Вопрос задан
  • 251 просмотр
Пригласить эксперта
Ответы на вопрос 1
Zatmil
@Zatmil
Fullstack-разработчик
На самом деле все просто. Я описывал это поведение в канале RN в телеграмме. Использование require блокирует тред, отсюда и задержка. Нужно либо грузить по сети картинки, если это API, используя, например, библиотеку FastImage, либо добавить картинки в assets платформ и подключать их через линки:
<Thumbnail source={{ uri: 'img1' }} />
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы