react native ios 기기 테스트 및 플리퍼 문제

ryan2022-12-01 12:05

ios 기기 테스트 및 빌드를 진행했다. 빌드는 생각보다 험난했다.

locale 문제 in simulator

react i18n next를 사용해서 다국어를 지원하고 있었는데 시뮬레이터에서 실행 시 흰 화면이 나오는 문제가 있었다. 에러 로그를 보니 locale이 undefined 가 나왔다. 해당 부분을 찾아 처리를 해주었다. 시뮬레이터에는 기본 언어셋이 지정되어 있지 않아 생기는 문제다.

let locale = NativeModules.SettingsManager.settings.AppleLocale // "fr_FR"
if (locale === undefined) {
    // iOS 13 workaround, take first of AppleLanguages array  ["en", "en-NZ"]
    locale = NativeModules.SettingsManager.settings.AppleLanguages[0]
    if (locale == undefined) {
          locale = "en"
    }
}

플리퍼 문제 (flipper)

플리퍼는 페이스북에서 만든 모바일앱 디버그 도구이다. 빌드 할 때 플리퍼 관련 에러가 났다. 현재 리액트 네이티브는 최신 버전의 플리퍼를 포함하지 않아 나는 에러였다.

iOS/Podfile 에서 플러퍼 버전을 지정해 주면된다.

use_flipper!({ 'Flipper' => '0.74.0' }).

그리고 ios 디렉토리에서 pod install을 해준다.

계속 빌드 실패가 된다면 플리퍼를 주석 처리해서 제외한다.

프로젝트 폴더에서 npm info flipper 를 하면 최신 버전을 알 수 있다. 현재 버전은 0.79.1 이다.

자세한 내용이 알고 싶으면 플리퍼 홈페이지에서 확인하자.

ios 대응의 대부분은 css 문제였다. safeArea 를 적용하면 키보드가 올라오는 부분에서 스테이터스의 높이 만큼 가려지는 문제가 있었다. 낮은 버전의 ios는 스탯바 크기가 20 픽셀이고 높은 버전의 ios에서는 44 픽셀 등 가지 각색이었다. 정확하게 측정하는 방법은 없고 버전에 따라 픽셀 높이를 지정해줘야 했다.

따로 패키지를 설치하지 않고 해결하려고 했으나 variataion이 많아서 결국 패키지 설치로 해결했다.

react-native-status-bar-height

그밖에도 ios에서는 text height가 기본 0으로 지정되어 minHeight를 지정해야 하는 등의 문제가 있었다.

시뮬레이터에서 갑자기 키보드가 안보일 때

시뮬레이터에서 키보드를 안보이게 할 수 있는데 단축키를 눌러 키보드가 없어지는 경우가 있다. 이 경우

iOS Simulator -> Hardware -> Keyboard

"Connect Hardware Keyboard" 를 체크 해제 하면 된다.

ios 가로모드 막기

ios/프로젝트명/info.plist에서 랜드 스케이프 (가로) 부분을 삭제하면 된다. x code의 제너럴->targets 에서도 설정이 가능하다.

<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>

ios icon 생성

1024px의 png 로고 이미지가 있어야 한다. 나는 안드로이드의 image asset에서 생성한 svg를 inkscape에서 편집한 후 png로 export 했다.

아이폰 아이콘 크기에 맞게 리소스를 변경을 해줘야 하는데 다음 사이트에서 가능하다.

https://appicon.co/

만들어진 폴더 중 AppIcon.appiconset 부분을 ios/프로젝트명/Images.xcassets 폴더에 넣으면 된다.

리액트 네이티브 앱 아이콘 변경이 안되는 문제

진짜 이 부분 때문에 엄청 고생했다. 하루 이상 시간을 쓴 것 같다. 원래는 간단하게 되어야 하는 부분인데 엄청 꼬였다.

나중에 알게 된건데 info.plist에서 문제가 있었다. <string></string> 이렇게 닫혀 있어야 하는 줄이 <string>으로 열려 있었다. 오타 때문에 그런것 같았다. 에러가 안나서 알 수 가 없었다.

이 때는 진짜 원인을 알 수가 없어서 ios 폴더를 백업한 후 프로젝트 폴더에서 새로운 프로젝트를 만들어 ios 폴더를 통째로 교체해서 해결했다. 만들어진 새로운 폴더는 지워준다.

npx react-native init YourProjectName
mv YourProjectName/ios ios
rm -rf YourProjectName

출처 : https://github.com/react-native-community/cli/issues/808#issuecomment-543207588

정말 최후의 수단인것 같다. 정말 힘들었다.

굿럭 굿빌드...

react-native