[RN] 기본 정리

IOS plist 파일

plist 파일은 IOS 앱의 프로퍼티 리스트(property list)파일로 앱의 이름, 아이콘, 버전 등 앱에서 필요한 설정값을 지니고 있습니다.

경로 > ios/프로젝트이름/Info.plist 파일 을 열고 <dict> </dict>속성안 맨 마지막에 아래 내용을 추가하여 사용 합니다.

<key>UIAppFonts</key>
<array>
	<string>MaterialIcon.ttf</string>
</array>
</dict>
</plist>

IOS 이미지 사용하기

리액트 네이티브에서 이미지를 화면에 보여줄 때는 Image라는 컴포넌트를 사용합니다.

🗂️ assets/images 디렉터리

• circle.png
• circle@2x.png
• circle@3x.png

원본이미지가 200px 200px 이라면
@2x 이미지는 400px 400px
@3x 이미지는 600ㅔㅌ * 600px

iPhone 11 Pro의 화면 해상도는 2436px * 1125px 이고 화면 밀도는 458ppi 입니다.

ppi(pixel per inch)란 1inch에 몇 px이 들어갈 수 있는지를 의미하는 밀도 단위 입니다.
리액트 네이티브에서 스타일링 할때 크기는 모두 dp로 설정합니다. dp(density-independent pixel)란 1인치당 픽셀 밀도에 따라 크기가 일관된 UI를 보여줄 수 있는 단위입니다.

dp와 px을 변환하는 계산 방법은 다음과 같습니다.

• dp = px * 160 / ppi
• px = dp * ppi / 160

만약 iPhone 11 Pro에서 너비 200의 사이즈에 선명한 이미지를 보여주려면 200 * 458 / 160 = 572.5px 의 너비를 가진 이미지를 사용해야 합니다.

따라서 이 크기와 가장 비슷한 @3x 이미지를 사용해야 선명하게 보여줄 수 있습니다.

iPhone 11의 해상도는 1792px x 828px이며 화면 밀도는 326ppi입니다.
iPhone 11에서 너비 200dp의 사이즈에 선명한 이미지를 보여주려면 200 * 326 / 160 = 407.5px이 너비를 가진 이미지를 사용해야 합니다.

따라서 이 디바이스 에서는 @2x 이미지를 사용해야 선명하게 보여줄 수 있습니다.

IOS, Android 폰트 사용법

1. 안드로이드, IOS 폰트 추가
   https://velog.io/@tjdgus0528/React-Native-Fonts-%EC%84%A4%EC%A0%95

2. https://jw910911.tistory.com/147

IOS 사용 가능한 [시뮬레이터 목록] 확인

xcrun simctl list devices

IOS 사용하고자 하는 [시뮬레이터 이름으로 변경]

npx react-native run-ios --simulator="iPhone 11"