react native apk 세팅 및 추출 방법 정리 & app icon 만들기

기본 세팅하기

일단 react native로 만들 준비가 완료되면, 다음과같은 명령어를 해본다.

 

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle

행여나 잘 안될수도있다.

 

그럴땐 다음과같이 수정해준다.

 

projectFolder/android/app/build.gradle

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ] // Name of the font files you want to copy
]

 

맨아래에 저걸 추가해주자.

주로 안되는 이유가 vector-icons 사용할때인데, 설치가 왠만해선 한번에 안되는거같다.

저렇게 설정도 한번 해주자.

 

만약 저렇게 하고 맨위에있던 명령어를 하고 나면 다음과같은 경로에 Test로 할수있는 apk파일이 보일것이다.

projectFolder/android/app/build/outputs/apk/debug/app-debug.apk

 

이와같은 방법으로 추출하는 방법이 있고,

다음과같이 추출하는걸 권장한다.

 

android studio실행 -> android폴더 선택 후 build sync 맞춰줌.

-> 이후 bulid - Build Bundle(s) / APK(s) - Build APK(s)로 apk 파일을 추출해준다.

위와 같은 폴더 경로에 생성될 것이다.

 

끝.

 

 

ps. icon까지 만들기.

https://www.autodraw.com/

AutoDraw

 

해당 사이트에서 아이콘을 만들어주자 (본인이 만들수있다면 만드는걸 추천)

 

다운받은 파일을 다음과같은 사이트에 넣어본다.

http://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=1&foreground.space.pad=0.25&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(255%2C%20255%2C%20255)&crop=0&backgroundShape=circle&effects=none&name= 

Android Asset Studio - Launcher icon generator

android용 아이콘 제작 사이트이다.

 

참고로 최근 안드로이드 아이콘들은 circle 로 만들어야한다. (필수임)

 

 

apple용 app은 다음과같은 사이트에서 뽑아본다.

 

https://www.appicon.co/

App Icon Generator

 

다음과같이 뽑아준다.

 

그럼 이제 다음으로 안드로이드에서 저 아이콘을 넣는 방법을 알려주겠다.

 

프로젝트폴더/android/app/src/main/res 안에 해당 파일들을 다 넣어준다.

 

++ 오류가 나길래 확인해보니까 AndroidManifest.xml에서 

android:roundIcon="@mipmap/ic_launcher"

이부분을 수정해줘야하더라.. (_round 가 붙어있을거임 지우면됨.)

 

앱의 경우 Xcode를 실행해서 다음과같이 수정하면된다.

 

프로젝트를 열고, App이름을 선택, Images 들어가면 AppIcon이란게있는데 여기에 넣어주면됨.

 

이런식으로 들어갈거임.

 

아이폰 추출방법은 다음기회에~