[클라우딩 어플리케이션 엔지니어링 TIL] 240320, 240321- React Native에서 카메라 앱 열기 / 앱 아이콘, 스플래시 화면, 폰트 설정

Intro

---

앱에서 자주 쓰는 카메라 연결과 앱 아이콘 설정, 스플래시 화면 설정, 폰트 설정에 대해 알아보았다.

 

 

 

오늘 학습한 내용

---

앨범 가져오기

https://github.com/react-native-cameraroll/react-native-cameraroll

GitHub - react-native-cameraroll/react-native-cameraroll: CameraRoll is a react-native native module that provides access to the

👩‍💻 xcode 설정
xcode 열기 → info file 열기 → “Privacy - Photo Library Usage Description”, “Privacy - Photo Library Additions Usage Description”, “Privacy - Camera Usage Description” 설정하기

 

 

카메라 열기

카메라롤에서 선택된 사진이나 비디오를 가져오거나 카메라를 켤수 있는 라이브러리: 

https://github.com/ivpusic/react-native-image-crop-picker

GitHub - ivpusic/react-native-image-crop-picker: iOS/Android image picker with support for camera, video, configurable compressi

 

 

 

카메라 열기

ImagePicker.openCamera({
  width: 300,
  height: 400,
  cropping: false
}).then(image => {
  console.log(image);
});

 

앨범에서 가져오기

ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true
}).then(image => {
  console.log(image);
});

 

---

앱 아이콘 설정하기

: xcode > images에서 각 디바이스 사이즈 별로 아이콘을 지정해야 한다.

다음 사이트에서 편리하게 하나의 사진을 여러 사이즈로 생성할 수 있다.

https://www.appicon.co/

App Icon Generator

 

 

스플래시 화면 설정하기

: xcode > lunchScreen

 

 

 

커스텀 폰트 설정하기

: ios, android 웹 폰트 각각 따로 설정해야 한다.

1. 폰트 파일 다운로드
2. ios 폴더 내에 Fonts 폴더를 생성하고 폴더 안에 다운로드 받은 폰트를 붙여넣기한다.
3. xcode > info에 'Fonts provided by application' 설정하기 ➡️ item에 폰트 경로 추가

 

자주 사용하는 대표적인 폰트

https://noonnu.cc/font_page/694

눈누

 

 

 

마무리

---

이제 기본적인 내용들은 어느정도 다 학습한 것 같다.

실습을 따라하면서 차근차근 익혀봐야지!