Front End/React Native

React Native TouchableOpacity

YJ_SW 2021. 1. 18. 16:06
728x90

TouchableOpacity

FlatList 안에 item들 클릭 이벤트 걸고 싶을 때 -pressable하게 만들기

( button으로 감싸면 안됨 :  style 줄 수 없음 )

pressHandler // 클릭하면 리스트에서 삭제하기 

 const pressHandler = (id) => {
    console.log(id)
    setPeople((prevPeople)=>{
      return prevPeople.filter(person => person.id != id)
    })
  }

  return (
    <View style={styles.container}>
      <FlatList
        numColumns = {2}
        keyExtractor ={(item)=> item.id}
        data={people}
        renderItem={({ item })=>(
          <TouchableOpacity onPress={() => pressHandler(item.id)}>
            <Text style={styles.item}>{item.name}</Text>
          </TouchableOpacity>
         
        )}
      />
)
728x90