use another VirtualizedList - backed contained instead. | React Native

use another VirtualizedList - backed contained instead. | React Native

ScrollView 안에 FlatList나 ScrollView를 사용해서 발생한 오류이다.

우선 기본적으로 FlatList에 scroll이 적용되니, 단순히 스크롤이 하나 필요한 거라면 같이 사용하지 않는다. 다른 요소를 FlatList와 함께 사용하고 싶다면 ListHeaderComponent와 ListFooterComponent에 다른 요소를 집어넣는다.

// Nope ❌ item.id} /> // Use this ✅ } data={DATA} renderItem={renderItem} keyExtractor={item => item.id} />

[형태]

FlatList와 ListHeaderComponent

각 FlatList마다 CatgoryBar를 넣고 싶다면 SectionList를 사용한다.

const DATA = [ { title: "Category1", data: ["Pizza", "Burger", "Risotto"] }, { title: "Category2", data: ["French Fries", "Onion Rings", "Fried Shrimps"] }, { title: "Category3", data: ["Water", "Coke", "Beer"] }, { title: "Category4", data: ["Cheese Cake", "Ice Cream"] } ]; // ... item + index} renderItem={({ item }) => } renderSectionHeader={({ section: { title } }) => ( {title} )} />

여기서 item은 data 배열의 한 요소 이고, section은 DATA 전체 중 한 요소 (title, data 키를 가진 객체)를 말한다.

[형태]

SectionList

[참고자료]

from http://seyeon.tistory.com/36 by ccl(S) rewrite - 2021-12-27 11:27:27