React-Native другой контейнер, поддерживаемый VirtualizedList

Question

После обновления до версии 0,61 для реакции я получаю много предупреждений:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

Что такое VirtualizedList-backed container, который я должен использовать, и почему теперь рекомендуется не использовать какчто?

Answer 1

Если кто-то все еще ищет предложение по проблеме, которую @Ponleu и @David Schilling описали здесь (относительно контента, который выходит за пределы FlatList), то я выбрал такой подход:

<SafeAreaView style={{flex: 1}}>
    <FlatList
      data={data}
      ListHeaderComponent={ContentThatGoesAboveTheFlatList}
      ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>

Вы можете прочитать больше об этом здесь: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Надеюсь, это кому-нибудь поможет. :)

Answer 2

Глядя на примеры в документах, я изменил контейнер с:

<ScrollView>
    <FlatList ... />
</ScrollView>

на:

<SafeAreaView style={{flex: 1}}>
    <FlatList ... />
</SafeAreaView>

, и все эти предупреждения исчезли.

Answer 3

На всякий случай, если это кому-то поможет, вот как я исправил ошибку в моем случае.

У меня было FlatList, вложенное в ScrollView:

render() {
    return (
        <ScrollView>
            <h1>{'My Title'}</h1>
            <FlatList
                data={this.state.myData}
                renderItem={({ item }) => {
                    return <p>{item.name}</p>;
                }}
            />
            {this.state.loading && <h2>{'Loading...'}</h2>}
        </ScrollView>
    );
}

иЯ избавился от ScrollView, используя FlatList для рендеринга всего, что мне нужно, что избавило от предупреждения:

render() {
    const getHeader = () => {
        return <h1>{'My Title'}</h1>;
    };

    const getFooter = () => {
        if (this.state.loading) {
            return null;
        }
        return <h2>{'Loading...'}</h2>;
    };

    return (
        <FlatList
            data={this.state.myData}
            renderItem={({ item }) => {
                return <p>{item.name}</p>;
            }}
            ListHeaderComponent={getHeader}
            ListFooterComponent={getFooter}
        />
    );
}