React Native 연구용 프로젝트 입니다.
react native 0.68 부터 new architecture 를 실험적으로 사용할 수 있게 되었습니다. 새로운 아키텍처는 레거시 아키텍처에서 불가능했던 기능과 개선 사항을 구현하고 있는데 자세한 사항은 여기에서 확인하실 수 있습니다. 본 프로젝트도 새로운 아키텍처를 중심으로 환경설정 및 설명을 진행하고자 합니다.
...
newArchEnabled=true
...
newArchEnabled 속성을 true 로 수정해주세요.
cd android
./gradlew generateCodegenArtifactsFromSchema
cd ios
bundle install && RCT_NEW_ARCH_ENABLED=1 bundle exec pod install
android 12 버전부터 기본으로 OS단에서 Splash Screen 이 제공되는데 이러한 기본 Splash Screen 에는 단순 색상의 배경과 중앙에 표시되는 아이콘으로 구성됩니다. 그러므로 12 버전 이하 및 이상 버전 안드로이드 기기와 ios 기기에서 일관성 높은 Splash Screen 을 보여주기 위해서는 모든 OS 에서 단순 색상의 배경에 아이콘이 중앙에 배치된 커스텀 Splash Screen 이 구동될 때 표시되게 하는 것이 좋은 선택일 수 있습니다. 본 프로젝트에는 이와 같은 설정을 직접 구현한 상태이며, Splash Screen 의 배경 색상과 중앙에 배치된 아이콘 이미지에 대한 커스터마이징을 하는 방법을 아래에 기술하였습니다.
(※ react-native-splash-screen 또는 react-native-bootsplash
와 같은 라이브러리를 사용하여 splash screen 을 구성하는 방법도 있지만, 추후 업데이트나 유지보수를 고려한다면 서드파티 라이브러리는 최대한 지양하는 것이 좋다고 생각합니다.)
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<color name="splash_init_bg_color">#127AF5</color>
...
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<!-- ### 기본 Splash Screen 화면에 대한 테마 설정 ### -->
<style name="Theme.App.CustomSplash" parent="Theme.App">
<item name="android:windowBackground">@drawable/splash_init_icon</item>
<item name="postSplashScreenTheme">@style/Theme.App</item>
<!-- android 12 버전 이상부터 적용되는 옵션들은 ./values-v31/styles.xml 의 "<style name="Theme.App.CustomSplash" parent="Theme.App">...</style>" 에 기재함 -->
</style>
<!-- ### 기본 Splash Screen 화면이 종료된 후 바로 아래 테마로 전환됨 ### -->
<style name="Theme.App" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
<item name="android:windowBackground">@color/splash_init_bg_color</item>
</style>
...
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<style name="Theme.App.CustomSplash" parent="Theme.App">
<item name="android:windowBackground">@drawable/splash_init_icon</item>
<item name="postSplashScreenTheme">@style/Theme.App</item>
<item name="android:windowSplashScreenBackground">@color/splash_init_bg_color</item>
<item name="android:windowSplashScreenAnimatedIcon">@drawable/splash_init_icon</item>
</style>
...
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>
...
<dimen name="splash_init_icon_size">160dp</dimen>
...
</resources>
https://www.appicon.co/#image-sets
이미지 이름은 splash_init_icon 으로 설정해주세요.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@color/splash_init_bg_color" />
<item
android:width="@dimen/splash_init_icon_size"
android:height="@dimen/splash_init_icon_size"
android:drawable="@mipmap/splash_init_icon"
android:gravity="center" />
</layer-list>
dependencies {
// The version of react-native is set by the React Native Gradle Plugin
implementation("com.facebook.react:react-android")
implementation("androidx.core:core-splashscreen:1.0.1") // 이 부분 추가!!
if (hermesEnabled.toBoolean()) {
implementation("com.facebook.react:hermes-android")
} else {
implementation jscFlavor
}
}
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/Theme.App"> // 이 부분 추가 (또는 수정)
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true"
android:theme="@style/Theme.App.CustomSplash"> // 이 부분 추가 (또는 수정)
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
// 이 함수 추가!
override fun onCreate(savedInstanceState: Bundle?) {
installSplashScreen()
super.onCreate(savedInstanceState)
}
return [super application:application didFinishLaunchingWithOptions:launchOptions];
이 부분을
BOOL result = [super application:application didFinishLaunchingWithOptions:launchOptions];
self.window.rootViewController.view.backgroundColor = [UIColor colorWithRed:0.0705 green:0.47843 blue:0.96078 alpha:1.00];
return result;
이렇게 수정합니다. (colorWithRed, green, blue 에는 splash 화면의 배경 색상에 대한 rgb 값을 넣으면 됩니다.)
아래 사이트에 접속하면 특정 포맷의 색상 값을 다양한 색상 포맷으로 변환시켜 줍니다. 그 중에서 sRGB 0-1.0 에 해당하는 값을 사용하면 됩니다.
https://www.easyrgb.com/en/convert.php#inputFORM
android 13 버전 부터 앱 테마 아이콘을 지원하기 시작했습니다. 테마에 따라 앱 아이콘의 배경색상과 전경아이콘 색상도 변경되도록 지원하는 것이 가능해졌는데, 이를 위해서는 android app 에 적응형 아이콘을 적용해야 합니다. 아래에 앱 아이콘을 커스터마이징 할 수 있는 방법에 대해 기재하였습니다.
예를 들어 다음과 같이 준비합니다.
- ic_launcher_background.png
- ic_launcher_foreground.svg
(투명한 배경에 중앙에 텍스트가 위치한 이미지 입니다. 상하좌우 여백이 이정도 존재해야 합니다.)
위 이미지와 같이 icon type 은 "Launcher Icons (Adaptive and Legacy)" 를 선택한 후 Foreground Layer, Background Layer 에 해당하는 이미지를 등록해주세요. 그리고 옆에 미리보기가 표시되는데, 둥근 원안에 전경(foreground) 이미지가 온전히 들어가 있는지 확인해주시고, 만약 둥근 원 밖을 초과했을 경우 전경 이미지의 상하좌우 여백을 더 준 이미지로 교체해야 합니다. 모두 완료가 되었다면 Next 버튼을 클릭후 Finish 버튼을 클릭해주세요.
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
<monochrome android:drawable="@drawable/ic_launcher_foreground"/> // <-- 이 부분을 추가해주세요.
</adaptive-icon>
<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="@drawable/ic_launcher_background"/>
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
<monochrome android:drawable="@drawable/ic_launcher_foreground"/> // <-- 이 부분을 추가해주세요.
</adaptive-icon>
2. https://www.appicon.co/#app-icon 에 접속하여 아이콘 이미지를 첨부한 후 "Generate" 버튼을 클릭하면 AppIcons.zip 파일이 다운로드 됩니다.
패키지명은 앱의 고유 식별자 입니다. android 및 ios 는 패키지명을 통해 앱을 식별합니다. 패키지명은 다른 앱과 중복되지 않도록 설정해야 합니다. 패키지명을 변경하는 방법은 아래애 기재하였습니다.
앱스토어에서 표시되는 앱의 이름을 설정하는 방법에 대해 다음과 같이 기재합니다.
