[React Native] 폰트, MP3 등 에셋 쉽게 추가하기

# react-native-assets를 활용해서 네이티브 프로젝트에 에셋 추가하기

- React Native 환경에서 개발을 하다보면,  Fonts를 변경하거나, 효과음이나 배경을을 추가하기 위해 MP3와 같은 음원 파일을 사용해야 하는 경우가 생깁니다. 문제는 이미지처럼 쉽게 포함시키지 못하고, XCode에 파일을 추가하거나, Android의 리소스에 추가하는 등의 추가작업이 요구됩니다. 하지만 이는 개발 하는 입장에서 시간을 빼았기는 귀찮은 일입니다. 본 포스팅에서는 이런 경우 도움이 되는 방법을 소개하려고 합니다

 

# 사용방법

- 자세한 사용방법 및 옵션들은 아래의 페이지에 잘 설명되어 있으니 참고하시기 바랍니다.

GitHub - unimonkiez/react-native-asset: Linking and unlinking of assets 🔥

 

- 사용방법은 간단합니다. 우선 아래의 명령어를 터미널에서 실행해서 필요한 라이브러리를 설치해 줍니다. 참고로 프로젝트에 설치하는 것이 아니라 운영체제 전역으로 설치 됩니다. 한 번 설치 해두고, 다른 React Native 프로젝트에서도 사용하실 수 있습니다

npm install -g react-native-asset
# or yarn
yarn global add react-native-asset

 

- 설치가 완료되면, 에셋을 추가하려는 프로젝트의 루트 경로에 react-native.config.js 라는 파일을 생성하고, 아래와 같이 추가할 에셋이 있는 경로를 추가 해주시면 됩니다.

 assets: [
    "./src/font",
    "./src/mp3",
  ];

 

- 만약 플랫폼 별로 다르게 파일을 추가하고 싶을 경우, 아래와 같이 사용하실 수도 있습니다

assets: [
  "./src/mp3",
],
iosAssets: [
  "./src/font/ios",
],
androidAssets: [
  "./src/font/android",
],

 

- 추가가 완료되면, 터미널에서 프로젝트 루트 경로로 이동한 후에, 아래의 명령어를 실행하시면 끝입니다. 최신 버젼(0.72)의 React Native(IOS)에서 폰트와 MP3 파일은 정상적으로 추가되는 것을 확인하였습니다.

react-native-asset

---