터치범위 넓히기

1. 아이콘의 터치범위 넓히는 법

(1) View로 되어있는 icon 컴포넌트를 TouchableOpacity로 바꾼다. 

(2) hitslop 이용 

TouchableOpacity의 hitslop 속성은 해당 아이콘의 터치 범위를 늘려준다. top, bottom, left, right의 옆에 자기가 늘려주고 싶은 만큼을 적어주면 된다.

const IconButton = ({name, bgColor}) => {
  return(
    <TouchableOpacity hitSlop={{top: 15, bottom: 15}} style={{paddingHorizontal: 6, backgroundColor: bgColor}}>
      <Ionicons name={name} size={24} color="black" />
    </TouchableOpacity>
  )
};

 

 

** 곁다리 

컴포넌트에서 속성을 props로 받을 경우, {} 없이 () 안에 바로 적어주면 되었다. 

왜냐하면, props는 하나의 객체이기 때문이다. 오류 코들르 읽어보니 () 안에는 객체나 배열같은 구조체만 들어올 수 있는 것 같다. 

위처럼 name, bgColor를 넣을거면 {} 로 감싸줘야 한다. 왜냐하면 우리가 name이라는 문자를 쓸 것이 아니라 name의 값, bgColor의 값을 쓸 것이기 때문이다. 

 

expo app 을 흔들면 메뉴가 나오고 거기서 웹의 개발자 도구처럼, 나온 프론트 엔드들을 뜯어볼 수 있는 기능이 있다. 

2. 스스로 해보기 

const Icons = ({name, isMeterial, isIron}) => {
  return (
    <TouchableOpacity hitSlop={{top: 10, bottom: 10}} style={styles.icons}>
      {isMeterial&& <MaterialCommunityIcons name={name} size={30} color="black" />}
      {isIron&&<Ionicons name="settings-outline" size={30} color="black" style={styles.icons} />}
    </TouchableOpacity>
  )
}