[RN공부하기] [7]Touchable Components

(1) Touchable 공식문서 읽어보기.

https://reactnative.dev/docs/touchableopacity

TouchableOpacity · React Native

 

Button컴포넌트보다 TouchableOpacity를 사용하는걸 지향하는듯.

[TouchableOpacity]

• 버튼을 눌렸을 때에 피드백을 주는 버튼입니다.

 

단순히 텍스트 문자열을 렌더링하는 것이 목표인 경우에는 Button 요소를 선택하는 것이 좋습니다. 그러나 양식화된 버튼을 만들 계획이라면 TouchableOpacity 래퍼를 사용하는 것이 좋습니다.

(2)TouchableOpacity를 추가한다.

import { StyleSheet, Text, FlatList, TouchableOpacity } from 'react-native';

<FlatList
            numColumns={2}
            keyExtractor={ (item)=> item.key}
            data={people}
            renderItem={ ( {item} ) => (
              <TouchableOpacity onPress= { ()=> pressHandler(item.key)}>
                <Text style={styles.item}>{item.name}</Text>
              </TouchableOpacity>
            )}
        >
 </FlatList>

const pressHandler = (key) => {
      console.log(key);
}

결과)

item 하나 누를때마다 그 item에 해당하는 key값을 console.log로 출력.