React Native - ScrollView 안에 FlatList를 쓰게 되면?

VirtualizedLists should never be nested inside plain ScrollViews

에러가 뿜어져나온다...

 

ScrollView안에 다른 ScrollView가 있기 때문인데.

map 메소드로 데이터를 표현하는 것은 이상적인 방법은 아니고 어떻게해야할까?

 

#1. 오류 문구를 숨겨버렷!

import { YellowBox } from 'react-native'



YellowBox.ignoreWarnings([
  'VirtualizedLists should never be nested', // TODO: Remove when fixed
])

이 방법으로 아예 노란 경고 문구를 숨길 수는 있지만 완벽하지는 않은 방법!

 

#2. 모든 리스트를 FlatList로 표현하는 것

<Container>
  <Header>...</Header>
  <FlatList
    style={{ width: '100%' }}
    nestedScrollEnabled
    data={['filter', 'title1', 'list1', 'title2', 'list2']}
    keyExtractor={(data) => data}
    renderItem={({ item, index }) => {
      switch (index) {
        case 0:
          return <SearchFilterCard />;
        case 1:
          return <Text style={styles.title}>Title1</Text>;
        case 2:
          return (
            <FlatList
              style={{ width: '100%' }}
              nestedScrollEnabled
              data={['1', '2']}
              keyExtractor={(data) => data}
              renderItem={({ item, index }) => <MyCard />}
            />
          );
        case 3:
          return <Text style={styles.title}>Title2</Text>;
        case 4:
          return (
            <FlatList
              style={{ width: '100%' }}
              nestedScrollEnabled
              data={['3', '4', '5']}
              keyExtractor={(data) => data}
              renderItem={({ item, index }) => <MyCard />}
            />
          );

        default:
          return null;
      }
    }}
  />
</Container>

이렇게하면 스크롤바가 표시되고 경고 메세지가 제거되며 성능 저하가 일어나지 않는다.

 

 

#2-1. VirutalizedList 만들기

import React from 'react';
import { FlatList } from 'react-native';

export default function VirtualizedView(props: any) {
  return (
    <FlatList
      data={[]}
      ListEmptyComponent={null}
      keyExtractor={() => "dummy"}
      renderItem={null}
      ListHeaderComponent={() => (
        <React.Fragment>{props.children}</React.Fragment>
      )}
    />
  );
}

Usage:

<VirtualizedView>
  <Text>Anything goes here</Text>
  <FlatList 
    data={data}
    keyExtractor={keyExtractor}
    renderItem={({item}) => <Item data={item} />}
    onRefresh={refetch}
    refreshing={loading}
    onEndReached={concatData}
  />
</VirtualizedView>

 

#3. <Content>

조금 더 검색해보니 <Content>에 스크롤뷰가 있어서 대체해서 사용하면 된다고도 하는데 

아직 적용은 안해봤지만 일단 메모!