[ReactNative] FlatList 사용하기
15356 단어 reactnativereactnative
플랫리스트를 처음 사용해봤지만, 삭제해야 할 상황이라 아쉬워서 기록.
스크롤뷰 내에서 플랫리스트를 사용하게 될 경우 경고메시지가 뜨니 map메서드로 랜더링 하는 것이 좋음.
만일 둘 다 사용해야 할 경우 워닝을 지우려면 플랫리스트를 스크롤뷰 밖으로 빼줌.
FlatList 사용한 탑 버튼
const FirstRoute = ({ txt }) => {
const [selectedMenu, setSelectedMenu] = useState();
const [selectedBefore, setSelectedBefore] = useState(null);
const renderMenu = ({item}) => {
const isSelected = selectedMenu === item.id ? true : false;
const handleMenu = (id) => {
if (selectedBefore === id) {
setSelectedMenu(null);
setSelectedBefore(null);
return;
}
setSelectedMenu(id);
setSelectedBefore(id);
}
return (
<Menus
menu={item.list_name_shorten}
onPress={() => handleMenu(item.id)}
isSelected={isSelected}
/>
);
}
return (
<View>
<View style={styles.menuListMenu}>
<View style={styles.menuTopbutton}>
<FlatList
data={menuListMockData.menuList}
renderItem={renderMenu}
keyExtractor={(item) => item.id}
extraData={selectedMenu}
numColumns={6}
/>
</View>
{menuListMockData.menuList.map((singleList, index) => {
if (singleList.id !== selectedBefore && selectedBefore !== null) {
return(null);
} else {
return(
<View style={styles.menuWrap} key={`${singleList}${index}`}>
<Text style={styles.menuTitle}>{singleList.list_name}</Text>
{singleList.list_content.map((listItem, index) => {
return(
<View style={styles.singleMenuWrap} key={`${listItem}${index}`}>
<Image source={{uri : listItem.img_url}} style={styles.singleMenuImage} />
<View style={styles.singleMenuDescriptions}>
<Text style={styles.singleMenuTitle}>{listItem.title}</Text>
<Text style={styles.singleMenuOlives}>{listItem.olives} OLV</Text>
<Text style={styles.singleMenuDescription}>{listItem.description}</Text>
</View>
</View>
)
})}
</View>
)}
})}
</View>
</View>
)
}
map메서드 사용한 랜더링으로 Refactor
const FirstRoute = ({ txt }) => {
const [selectedMenu, setSelectedMenu] = useState();
const [selectedBefore, setSelectedBefore] = useState(null);
const TopMenu = ({id, menu}) => {
const isSelected = selectedMenu === id ? true : false;
const handleMenu = (id) => {
if (selectedBefore === id) {
setSelectedMenu(null);
setSelectedBefore(null);
return;
}
setSelectedMenu(id);
setSelectedBefore(id);
}
return (
<TouchableOpacity onPress={() => handleMenu(id)} style={isSelected ? styles.buttonSelected : styles.button}>
<Text style={isSelected ? styles.buttonTextSelected : styles.buttonText}>{menu}</Text>
</TouchableOpacity>
)
}
return (
<View>
<View style={styles.menuListMenu}>
<View style={styles.menuTopbutton}>
{menuListMockData.menuList.map((item, index) => (<TopMenu key={`${item}${index}`} id={item.id} menu={item.list_name_shorten} />))}
</View>
{menuListMockData.menuList.map((singleList, index) => {
if (singleList.id !== selectedBefore && selectedBefore !== null) {
return(null);
} else {
return(
<View style={styles.menuWrap} key={`${singleList}${index}`}>
<Text style={styles.menuTitle}>{singleList.list_name}</Text>
{singleList.list_content.map((listItem, index) => {
return(
<View style={styles.singleMenuWrap} key={`${listItem}${index}`}>
<Image source={{uri : listItem.img_url}} style={styles.singleMenuImage} />
<View style={styles.singleMenuDescriptions}>
<Text style={styles.singleMenuTitle}>{listItem.title}</Text>
<Text style={styles.singleMenuOlives}>{listItem.olives} OLV</Text>
<Text style={styles.singleMenuDescription}>{listItem.description}</Text>
</View>
</View>
)
})}
</View>
)}
})}
</View>
</View>
)
}
Author And Source
이 문제에 관하여([ReactNative] FlatList 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyeonze/ReactNative-FlatList-사용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)