개인용 RN 배포 매뉴얼

로컬에서 개발 마친 후 배포용으로 할 일

 

 

1. 패키지 네임 수정

 

편법 같지만 편한 방법

 

app.json, package.json에 이름 수정

 

// app.json
{
  "name": "stockapp",
  "displayName": "stockapp"
}

//package.json

{
  "name": "stockapp",
  "version": "0.0.1",

 

ios, android 폴더 삭제

www.npmjs.com/package/react-native-eject

 

react-native-eject 설치 후 react-native eject 실행

ios와 android 폴더가 변경한 이름으로 새로 생성된다.

 

www.npmjs.com/package/react-native-rename

npx react-native-rename <newName> -b <bundleIdentifier>

으로 bundleIdentifier 그 안드로이드 패키지 주소 설정하면 된다.

이름이 바꿔야지 명령어가 실행이 돼서

npx react-native-rename "임시" -b com.asf.stockapp

npx react-native-rename "stockapp" -b com.asf.stockapp

그냥 이렇게 두 번 실행했다.

 

굳이 eject를 쓰는 이유는 react-native-rename으로 이름을 바꿀 때 종속성 문제가 발생한 적이 있어서 eject로 변경할 이름에 맞게 ios, android 모든 파일을 생성해두고 react-native-rename은 안드로이드에 bundlerIdentifier만 수정하려고 씀

ios는 bundlerIdentifier를 xcode 가서 다시 설정해야 하는데 이건 쉽다. 그냥 프로젝트 폴더 누르고 바로 수정 가능함.

 

 

 

 

2. 리액트 파이어베이스 연결

 

rnfirebase.io/

React Native Firebase | React Native Firebase

console.firebase.google.com

로그인 - Google 계정

콘솔에서 생성하고 시키는대로 ios / android 폴더에 추가시키면 된다.

rn firebase의 get started 문서에 파베 모듈버전이 최신게 아니라서 콘솔 도움말 보고 만드는게 나음.

 

rnfirebase.io/enabling-multidex

Enabling Multidex | React Native Firebase

안드로이드에 멀티덱스 설정도 해줘야한다. 안그러면 에러남

 

 

 

 

3. 애드몹

 

{
  "react-native": {
    "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx",
    "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx"
  }
}

프로젝트 루트에 firebase.json 파일 만들고 앱id 입력

 

배너는 그냥 컴포넌트 만들어서 쓰고

 

import React, {useEffect, useState} from 'react';
import {Platform} from 'react-native';
import {
  InterstitialAd,
  AdEventType,
  TestIds,
} from '@react-native-firebase/admob';
import {androidFullAdId, iosFullAdId} from '../lib/key';

const adUnitId = __DEV__
  ? TestIds.INTERSTITIAL
  : Platform.OS === 'ios'
  ? iosFullAdId
  : androidFullAdId;

const interstitial = InterstitialAd.createForAdRequest(adUnitId, {
  requestNonPersonalizedAdsOnly: true,
});

const UseInterstitialAd = () => {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const eventListener = interstitial.onAdEvent((type) => {
      if (type === AdEventType.LOADED) {
        console.log('ad loaded')
        setLoaded(true);
      }
      // if (type === AdEventType.CLOSED) {
      //   console.log("ad closed");
      //   setLoaded(false);
       
      //   //reload ad 
      //   interstitial.load();
      // }
    });

    // Start loading the interstitial straight away
    interstitial.load();

    // Unsubscribe from events on unmount
    return () => {
      eventListener();
    };
  }, []);

  const showAd = () => {
    if(loaded){
      interstitial.show()
      setLoaded(false)
    }
  }

  return [showAd];
}

export default UseInterstitialAd

전면광고는 무조건 로드되어야 출력가능해서 훅으로 쓰면 된다.

난 앱 실행 한번당 전면광고 한번만 출력하려고 재로드 기능 주석시켜놨는데 type === CLOSED 코드 주석풀면 재사용 가능하다.

 

 

 

4. 아이콘

 

velog.io/@dody_/React-Native-%EC%95%B1-%EC%95%84%EC%9D%B4%EC%BD%98-%EB%B0%94%EA%BE%B8%EA%B8%B0

[RN] 앱 아이콘 바꾸기

블로그대로 따라하면된다. 아이콘은 플래티콘에서 찾자

 

아이폰 아이콘은 알파적용 일일이 없애야한다.

미리 미리보기 -> 내보내기 -> 알파 선택 삭제 해서 알파없는 아이콘으로 만들어둬야함

 

 

 

 

 

5. 스플래시

 

 

일단 xcode들어가서 ios 프로젝트 파일에 SplashScreen,storyboard 파일을 생성함

 

pgicons.abiro.com/

Abiro PhoneGap Image Generator

여기서 아이콘 넣고 스플래쉬 png파일을 만든다

이런식으로 나오면 이 파일을 react-native-make 로 설정시킴

github.com/bamlab/react-native-make

bamlab/react-native-make

 

 

react-native set-splash --path ./src/img/splash.png --resize center --background "#FFFFFF"

 

이렇게 커맨드치면 설정됨

 

 

github.com/crazycodeboy/react-native-splash-screen

crazycodeboy/react-native-splash-screen

만든 스플래쉬를 이걸로 적용해야 한다.

 

npm i react-native-splash-screen --save

 

설치하고 react-native link react-native-splash-screen 링크하면 안드로이드는 자동으로 설정이 됨.

 

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

ios 는 AppDelegate.m 파일가서 위에 RNSplashScreen 헤더랑 [스플래쉬 show] 코드만 추가한다.

show코드는반드시 리턴 바로앞에다 해야함.

 

 

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
    	// do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

자바스크립트로가서 SplashScreen 추가하고 앱 마운트될때 hide 시켜주면된다. 훅스에 useEffect 빈배열 넣고 하면 됨.

 

 

 

 

 

6. 앱 이름 변경

 

아이콘 아래에 표시될 이름 변경 하기

 

maruzzing.github.io/study/rnative/React-Native-%EC%95%B1-%EC%9D%B4%EB%A6%84-%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0/

React Native 앱 이름 다국어 설정하기

 

 

 

 

7. 스크린샷 제작

studio.app-mockup.com/

AppMockUp Studio (Beta)

 

 

8. 그래픽 디자인 만들기

 

pixlr.com/kr/editor/