Інший контейнер, підтримуваний VirtualizedList, React-Native

Після оновлення до реальної 0,61 я отримую багато попереджень:

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

Що ще, VirtualizedList-backed containerщо я повинен використовувати, і чому зараз радять не користуватися таким?

Якщо хтось все ще шукає пропозицію щодо проблеми, яку описали тут @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

Сподіваємось, це комусь допомагає. :)

Про всяк випадок, коли це комусь допомагає, саме так я виправив помилку у своєму випадку.

Я 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}
        />
    );
}

Переглядаючи приклади в документах, я змінив контейнер з:

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

до:

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

і всі ці попередження зникли.

На мою думку, я можу використовувати карту замість FlatList. Але в моєму випадку я не хочу показувати великий список. Якщо використання FlatList не спричинить ефективність роботи. тому я використав це для придушення попередження https://github.com/GeekyAnts/NativeBase/isissue/2947#issuecomment-549210509

Попередження з’являється тому, що ScrollViewі FlatListподіляють ту саму логіку, якщо FlatListпрацювати всередині ScrollView, воно дублюється

До речі SafeAreaView, для мене це не працює, єдиний спосіб вирішити це

<ScrollView>
    {data.map((item, index) => {
        ...your code
    }}
</ScrollView>

Помилка зникає

Я спробував кілька способів вирішити це, в тому числі ListHeaderComponentабо ListFooterComponent, але це все не підходило мені.

макет, який я хотів досягти, такий, і я хотів раз прокрутитись.

<ScrollView>
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />
</ScrollView>

Спершу хочу сказати завдяки цьому питанню та коментарям, які дали мені купу ідей.

Я думав про ListHeaderComponentмісця, що стоять над Плоским списком, але оскільки в моєму Flatlistнапрямку був стовпець, заголовок, який я хотів розмістити, пішов зліва від Flatlist:(

Тоді мені довелося приміряти на себе VirtualizedList-backed. Я просто намагався запакувати всі компоненти VirtualizedList, де renderItemsдається індекс, і там я міг умовно передавати компоненти renderItems.

З цим я міг би попрацювати Flatlist, але ще не намагався.
Нарешті це виглядає приблизно так.

<View>
  <Virtualizedlist
    data={[]}
    initialNumToRender={1}
    renderItem={(props)=>{
      props.index===0 ? (1st view here) : props.index===1 ? (2nd view here) : (my flatlist)
    }}
    keyExtractor={item => item.key}
    getItemCount={2}
    getItem={ (data, index) => {
      return {
        id: Math.random().toString(12).substring(0),
      }
    }}
  />
</View>

(inside which lazyly renders↓)
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />  

і, звичайно, в змозі прокрутити весь екран.

Ця проблема виникає, коли ви використовуєте <FlatList />всередині <ScrollView>однакову орієнтацію.

Щоб виправити це, просто додайте "горизонтальний" до свого FlatList:

<ScrollView>
    <FlatList **horizontal** ... />
</ScrollView>

Примітка: Ваш FlatList відображатиметься горизонтально