[React Native] Icon이나 Image로 button 만들기

1. Icon으로 버튼 만들기

vector-icons는 Expo 프로젝트에서 기본적으로 설치되는 라이브러리이다.
여기에서 제공되는 아이콘을 확인할 수 있다.

오른쪽 Filters를 눌러보면 다양한 아이콘 종류가 있는 것을 확인 할 수 있다. 나는 예시에서 MaterialCommunityIcons을 사용하지만 각자 선호도에 따라 자유롭게 선택할 수 있다. 대신 import를 꼭 해주어야 한다.

필터를 걸고 원하는 아이콘을 찾는다. 나는 예시로 'plus-circle'을 검색했다.

사용할 아이콘을 클릭하면 다음과 같이 나온다. 그대로 따라하면 된다. 첫번째로 import를 해주고 원하는 곳에서 컴포넌트를 사용하면 된다.

나는 버튼을 만들것이기 때문에 TouchableOpacity 컴포넌트 안에서 랜더링 해준다.
코드

import { MaterialCommunityIcons } from '@expo/vector-icons';

export default function App() {
  return(
    <TouchableOpacity onPress={() => alert('clicked!')}>
      <MaterialCommunityIcons name="plus-circle" size={24} color="black" />
    </TouchableOpacity>
    );
}

2. Image로 버튼 만들기

여기에서 아이콘 이미지를 다운로드 받는다.
아이콘을 다운 받으면 이미지와 함께 2배, 3배 사이즈의 아이콘이 함께 있는 것을 볼 수 있다. 다운로드가 완료된 n개의 이미지를 각각 '파일명.png', '파일명@2x.png'로 변경한다. 이렇게 파일명을 동일한 이름으로 사용하면서 뒤에 @2x, @3x를 붙이면 RN에서 화면 사이즈에 알맞은 크기의 이미지를 자동으로 불러와 사용한다.

아이콘 이미지는 assets 폴더 아래 icons 폴더를 생성하여 넣어둔다.
아래는 일부의 코드만 가져온 것이고 자세히 알고 싶은 경우 아래 링크를 참조한다.

React Native Button 컴포넌트 만들기
(3. 할 일 목록 만들기(Task 컴포넌트)부분을 보면 된다.)

코드

import { images } from '../images';

const IconButton = ({ type }) => {
  return (
    <TouchableOpacity style={styles.iconbutton}>
      <Image source={type} />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  iconbutton: {
    margin: 10,
  },
});

export default IconButton;