React Native에 시작 화면과 애플리케이션 아이콘을 추가하는 방법

모든 모바일 프로그램은 시작 화면과 프로그램 아이콘을 가지고 있으며, 이 아이콘들은 함께 첫인상을 제공한다.응용 프로그램 아이콘은 스토어, 장치의 응용 프로그램 서랍 등 다른 위치에 표시되고 응용 프로그램이 시작될 때 시작 화면이 표시됩니다.React 원본 프로그램에 시작 화면이나 프로그램 아이콘을 추가하는 것은 민첩한 과정일 수 있습니다.
이 강좌에서 react-native-bootsplash라는 훌륭한 패키지를 사용하여 프로그램이 시작될 때 초기 화면을 표시하고 React 원본 프로그램에 프로그램 아이콘을 추가하는 과정을 배울 수 있습니다.

선결 조건

이 자습서를 학습하려면 로컬 개발 환경에 다음과 같은 도구와 유틸리티가 설치되어 있는지 확인하고 다음에 설명된 서비스에 액세스할 수 있습니다.

설치된 버전Node.js 이상12.x.x 또는 더 높은 버전

포장 매니저, 예를 들어 npm나 실이나 npx

를 방문할 수 있다.

react-native-cli 설치 또는 npx

사용
예시 프로그램은 React 원본 버전 0.65.x 을 사용하여 만들어졌습니다.
Complete source code for this example is at this GitHub repo

React 네이티브 애플리케이션 설치

본 강좌의 예로 우리는 두 개의 화면이 있는 React 원본 프로젝트를 사용하고 React 내비게이션을 통합할 것이다.
새 React 네이티브 프로젝트를 만들고 React 탐색 의존 항목을 설치하려면 터미널 창에서 다음 명령을 실행합니다.

npx react-native init myAwesomeApp

# after the project directory is created
# navigate inside the directory
# and install the following dependencies

yarn add @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-screens 

src/ 디렉터리에 navigation/라는 새 디렉터리를 만들고 RootNavigator.js라는 새 파일을 포함합니다.스택 탐색 모드를 사용하려면 다음 코드를 추가합니다.

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

import HomeScreen from '../screens/HomeScreen';
import DetailScreen from '../screens/DetailScreen';

const Stack = createNativeStackNavigator();

const RootNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default RootNavigator;

수정App.js 파일:

import React from 'react';

import RootNavigator from './src/navigation/RootNavigator';

const App = () => {
  return <RootNavigator />;
};

export default App;

이제 두 개의 새 화면을 만듭니다.먼저 src/screens/라는 새 디렉토리를 만들고 HomeScreen.js라는 첫 번째 파일과 다음 코드 세그먼트를 추가합니다.

import React from 'react';
import {View, Text, StyleSheet, Pressable} from 'react-native';

const HomeScreen = ({navigation}) => {
  return (
    <View style={styles.screenContainer}>
      <Text style={styles.title}>Home Screen</Text>
      <Pressable
        style={styles.buttonStyle}
        onPress={() => navigation.navigate('Details')}>
        <Text style={styles.buttonTextStyle}>Go To Detail Screen</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 32,
  },
  buttonStyle: {
    height: 54,
    width: '80%',
    marginTop: 32,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2EE59D',
    shadowRadius: 5,
    shadowOpacity: 0.7,
    shadowColor: 'rgba(46, 229, 157, 0.5)',
    shadowOffset: {
      width: 0,
      height: 3,
    },
  },
  buttonTextStyle: {
    color: '#fdfdfd',
    fontWeight: '700',
  },
});

export default HomeScreen;

이제 두 번째 화면 구성 요소 파일DetailScreen.js과 다음 코드 세그먼트를 추가합니다.

import React from 'react';
import {View, Text, StyleSheet, Pressable} from 'react-native';

const DetailScreen = ({navigation}) => {
  return (
    <View style={styles.screenContainer}>
      <Text style={styles.title}>Detail Screen</Text>
      <Pressable
        style={styles.buttonStyle}
        onPress={() => navigation.navigate('Home')}>
        <Text style={styles.buttonTextStyle}>Go To Home Screen</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 32,
  },
  buttonStyle: {
    height: 54,
    width: '80%',
    marginTop: 32,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2EE59D',
    shadowRadius: 5,
    shadowOpacity: 0.7,
    shadowColor: 'rgba(46, 229, 157, 0.5)',
    shadowOffset: {
      width: 0,
      height: 3,
    },
  },
  buttonTextStyle: {
    color: '#fdfdfd',
    fontWeight: '700',
  },
});

export default DetailScreen;

템플릿 설정이 완료되면 iOS 및 Android를 위한 애플리케이션을 구축합니다.
iOS의 경우 다음 명령을 실행합니다.

npx react-native run-ios

안드로이드의 경우 다음 명령을 실행합니다.

npx react-native run-android

다음은 예시 응용 프로그램의 현재 형식에서의 외관이다.시작 화면 및 응용 프로그램 아이콘은 React Native와 함께 제공되는 기본 설정입니다.

우리는 Flaticon.com에서 아이콘을 예로 삼아 적용할 것을 선택했다.
원본 응용 프로그램 아이콘을 만든 후 디렉토리src/assets/에 저장하고 파일original_icon의 이름을 지정합니다.(참고: 필요한 경우 원래 아이콘 파일의 이름을 지정할 수 있습니다.)

알림: 초기 프로그램 로고가 1024x1024px 인지 확인하십시오.

react native bootsplash 설치

첫 번째는 react native bootsplash 패키지를 설치한 다음 자산을 생성하는 것입니다.
터미널 창을 열고 다음 명령을 실행하여 패키지를 설치합니다.

yarn add react-native-bootsplash

# or if using npm
npm install react-native-bootsplash

그런 다음 iOS의 경우 명령을 실행하여 pods를 설치합니다.

npx pod-install ios

알림: 0.60보다 낮은 React 본체 버전을 사용하면 설명here에 따라 패키지를 수동으로 연결하십시오.
그런 다음 package.json 섹션의 "scripts" 파일에 다음 스크립트를 추가합니다.

"scripts": {
  "generate": "npx react-native generate-bootsplash ./src/assets/original_icon.png --background-color=2EE59D   --logo-width=100 --assets-path=./src/assets --flavor=main"
}

각 옵션은 다음과 같습니다.

generate-bootsplash는 자산을 생성하는 명령이다.

./src/assets/original_icon.png는 원래 아이콘 파일의 경로입니다.React 기본 프로젝트에 파일을 저장한 위치에 따라 경로가 다를 수 있습니다.

--background-color=hexadecimal_value는 16진수 형식의 색상 값입니다.이 색상은 시작 화면의 배경색으로 사용됩니다.

--logo-width=100는 로고의 너비입니다.패키지

가 제공하는 기본값입니다.

assets-path는 자산 목록의 경로이다.

flavor는 안드로이드의 유일한 옵션입니다.이 값 main 을 안드로이드 응용 프로그램의 기본 버전에 전달합시다.당신은 Build Variants on Android here에 대한 더 많은 정보를 얻을 수 있습니다.

이것은 옵션assets-path에 지정된 경로에서 자원을 생성합니다. 이 옵션은 BootSplash.storyboard 디렉터리의 ios/app-name 파일이라는 스토리보드와 android/app/src/main/res 폴더의 다른 하위 디렉터리에서 안드로이드 프로그램에 자원을 생성합니다.

안드로이드에는 다섯 가지 크기의 화면 픽셀 밀도가 필요합니다.낮은 해상도 아이콘은 기본 라인 (mdpi) 에서 자동으로 생성됩니다.픽셀 밀도에 대한 자세한 내용은 다음 표를 참조하십시오.
결의
밀도
픽셀 단위
mdpi (베이스라인)
160 dpi
1×
hdpi
240 dpi
1.5×
초고해상도
320 dpi
2×
xxhdpi
480 dpi
3×
xxxhdpi
640 뉴스국
4×

iOS에 플래시 추가

먼저 Xcode에서 파일ios/app-name.xcodeproj을 엽니다.

그리고 파일 BootSplash.storyboard 을 path ios/app-name/ 디렉터리에서 Xcode 왼쪽에 있는 Xcode 파일 관리자의 프로젝트 디렉터리로 드래그합니다.

이것을 드래그하면 Xcode에서 폴더 참조를 만들라는 프롬프트를 표시합니다.우선Add to targets 옵션에서 app-name을 선택해야 합니다.Finish 버튼을 클릭합니다.
BootSplash.storyboard 파일이 다음 그림과 같이 파일 관리자에 표시됩니다.
BootSplash.storyboard 파일을 클릭하여 리소스를 생성할 때 배경색이 추가되었는지 확인합니다.

파일 관리자에서 Xcode 항목을 선택하고 BootSplash 옆에 있는 드롭다운 메뉴에서 Launch Screen File를 선택합니다.

이제 ios/app-name/AppDelegate.m 파일을 열고 가져오기를 다음 머리글 참조에 추가합니다.

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#import "RNBootSplash.h" // <- add this

같은 파일에 다음 행을 추가하여 BootSplash를 초기화합니다.

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ... other statements
   [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];
  return YES;
}

Android에 플래시 추가

먼저 android/app/src/main/java/com/app-name/MainActivity.java 파일을 수정합니다.

package com.rnsplashandiconexample;

import com.facebook.react.ReactActivity;

// ----- Add the following imports --------
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "rnSplashAndIconExample";
  }

  // ----- Add the following --------
  @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    RNBootSplash.init(R.drawable.bootsplash, MainActivity.this);
  }
}

그런 다음 수정android/app/src/main/res/values/styles.xml 파일:

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:textColor">#000000</item>
    </style>

    <!-- Add the following lines (BootTheme should inherit from AppTheme) -->
    <style name="BootTheme" parent="AppTheme">
      <!-- set the generated bootsplash.xml drawable as activity background -->
      <item name="android:background">@drawable/bootsplash</item>
    </style>

</resources>

다음은 원시android/app/src/main/AndroidManifest.xml 표시와 그 내용을 삭제함으로써 <intent-filter> 파일을 수정합니다.android:exported="true" 를 추가하여 대체하고, 이전 단계에서 만든 테마를 사용할 새 activity 요소를 만듭니다.

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">  <!--- Add this -->
</activity>

<!-- Then, add the following lines -->
<activity
      android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
      android:theme="@style/BootTheme"
      android:launchMode="singleTask">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
</activity>

탐색기를 설치할 때 시작 화면을 표시하는 방법을 조정합니다.

React 내비게이션NavigationContainer의 모든 하위 항목을 처음 설치하기 전에 시작 화면의 표시 행위를 제어할 수 있습니다.이는 NavigationContainer에 onReady 라는 아이템을 사용해 구현할 수 있다.
가져오기RootNavigator.js를 통해 도구react-native-bootsplash를 추가하고 수정onReady 파일을 만듭니다.

// after other import statements
import RNBootSplash from 'react-native-bootsplash';

const RootNavigator = () => {
  return (
    <NavigationContainer onReady={() => RNBootSplash.hide()}>
      {/* Rest remains same */}
    </NavigationContainer>
  );
};

시작 화면 구성 테스트

부팅 화면을 보는 마지막 단계는 iOS와 안드로이드에build 명령을 실행하는 것입니다.
터미널 창을 열고 iOS 및 Android에 대한 응용 프로그램 구축 명령을 실행합니다.

# for iOS
npx react-native run-ios

# for Android
npx react-native run-android

다음은 이 단계 이후의 출력입니다.

iOS 애플리케이션에 애플리케이션 아이콘 추가

서로 다른 iOS 설비에 자산을 생성하기 위해 저는 appicon.co라는 무료 응용 아이콘 생성기를 사용했습니다.

모든 이미지 자산을 생성하면 zip 파일에 다운로드할 수 있습니다.
iOS 애플리케이션 아이콘을 업로드하는 프로세스는 네이티브 iOS를 사용하여 개발하는 프로세스와 동일합니다.Xcode에서 파일ios/app-name.xcodeproj을 엽니다.파일 관리자에서 Image.xcassets를 선택합니다.그런 다음 응용 프로그램 아이콘을 선택합니다.

appicon에서 다운로드하고 압축을 풀면 필요한 모든 이미지 자원을 드래그합니다.co. 필요한 픽셀 밀도에 따라 이미지를 배치합니다.완료되면 Xcode의 모양은 다음과 같습니다.

터미널 창을 열고 명령을 실행하여 iOS 애플리케이션을 구축합니다.

npx react-native run-ios

재구성하면 응용 프로그램 아이콘이 표시됩니다.

Android 응용 프로그램에 응용 프로그램 아이콘 추가

leverage react native bootsplash 패키지는 안드로이드에 모든 응용 프로그램 아이콘을 생성하여 android/app/src/main/res 디렉토리의 여러 하위 디렉토리에 저장합니다.

여기서 가장 간단한 방법은 android:icon 파일의 속성android:roundIcon과 android/app/src/main/AndroidManifest.xml의 기본값을 바꾸어 bootsplash_logo 파일 이름을 가리키는 것이다.

 <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      // modify the two lines below
      android:icon="@mipmap/bootsplash_logo"
      android:roundIcon="@mipmap/bootsplash_logo"
      // ----------------------------
      android:allowBackup="false"
      android:theme="@style/AppTheme">

수정 후 터미널 창의 다음 명령을 사용하여 안드로이드 응용 프로그램을 재구성합니다.

npx react-native run-android

재구성하면 응용 프로그램 아이콘이 표시됩니다.

결론

일단 네가 이 과정의 비결을 터득하게 되면 너무 많은 시간을 들일 필요가 없다.이것은 React 원본 프로그램에 시작 화면과 프로그램 아이콘을 추가하는 데 필요한 절차입니다.react-native-bootsplash에 대한 더 높은 사용 방법은 official documentation here on GitHub를 보십시오.화면 애니메이션을 시작하는 것을 포함한 고급 전략을 소개했다.
마지막으로 민감한 논리를 포함하는 비즈니스 원본 프로그램을 개발하고 있다면 각별한 주의를 잊지 마세요.당신은 다음과 같은 방식으로 그들이 코드 절도, 변경, 역방향 프로젝트의 영향을 받지 않도록 보호할 수 있습니다.
The complete source code for this example is at this GitHub repo