Search
🗜️

RN 프로젝트 시작 Guide

생성일
2021/02/21 12:59
태그
React Native
속성

환경

node v12.0.0

프로젝트 생성

$ react-native init RestockReminder
Bash
복사

Metro 실행

npm start
Bash
복사

iOS 환경 설정

Flipper Disable

2021.02 기준 Flipper가 정상동작 하지 않아 iOS앱이 빌드되지 않는 이슈 있음.
// Podfile target 'RestockReminder' do config = use_native_modules! use_react_native!(:path => config["reactNativePath"]) target 'RestockReminderTests' do inherit! :complete # Pods for testing end # Enables Flipper. # # Note that if you have use_frameworks! enabled, Flipper will not work and # you should disable these next few lines. #use_flipper! 👈 주석 #post_install do |installer| 👈 주석 # flipper_post_install(installer) 👈 주석 #end end
Bash
복사

dependency 설치

pod install
Bash
복사

XCode 실행 및 Run

Android 환경 설정

바로 실행 가능

TypeScript 로 전환

dependenct 설치

npm install typescript @types/react @types/react-native
Bash
복사

확장자 변경

App.js 👉 App.tsx index.js 👉 index.ts
Bash
복사

Firebase 연동

Firebase Project 생성

생략

Github Repository 생성

생략

Firebase 모듈 추가

npm install --save @react-native-firebase/app npm install @react-native-firebase/analytics
Bash
복사

iOS Firebase 적용

firebase 프로젝트에서 생성한 ID 로 변경
pod install
Bash
복사
AppDelegate.m
#import "AppDelegate.h" #import <React/RCTBridge.h> #import <React/RCTBundleURLProvider.h> #import <React/RCTRootView.h> #import <Firebase.h> 👈 #ifdef FB_SONARKIT_ENABLED ... @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [FIRApp configure]; 👈 ... return YES; } @end
Objective-C
복사

Android Firebase 적용

package명 전체 찾아바꾸기

package 명 변경

// MainApplicatiino.java import com.facebook.react.BuildConfig;
Java
복사

UI Framework