react-native-viva-ui v0.0.18

viva-ui

이 프로젝트는 react-native-cli를 바탕으로 만들었습니다.

Getting Started

우선 개발을 위해서는 Homebrew, Nodejs, Watchman, Xcode, react-native-cli를 설치해야 합니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew install node
brew install watchman
npm install -g react-native-cli

ios

Xcode를 설치해줍니다 Xcode 다운로드 링크:https://apps.apple.com/us/app/xcode/id497799835?mt=12

Xcode 설치가 완료되면, Command Line Tools를 설정할 필요가 있습니다. Xcode를 실행하고 상단 메뉴에서 Xcode > Preferences... > Locations로 이동하여 Command Line Tools가 잘 설정되었는지 확인합니다. ex) Xcode 13.1 (13A1030d). 만약 설정되어있지 않다면 dropdown 메뉴를 선택하여 가장 최신의 Command Line Tool을 선택해 줍니다.

Cocoapods을 설치해줍니다. ios 개발에 사용되는 의존성 관리자입니다.

Cocoapods:https://cocoapods.org/

sudo gem install cocoapods

비쥬얼스튜디오코드로 프로젝트 파일을 오픈합니다. 그 후 아래의 실행어를 입력합니다

npm install

pod install 실행합니다.

cd ios && pod install && cd ..

터미널에 react-native start를 실행 후 다른 터미널에 react-native run-ios를 실행합니다.

npx react-native start

npx react-native run-ios

android

react-native 공식문서에서 Homebrew를 통해 JDK를 설치하는걸 권장하고 있습니다.

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

JDK를 통해 자바가 잘 설치되었다면 아래와 같은 버전을 확인 할 수 있습니다.

java -version
openjdk version "1.8.0_292"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_292-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.292-b10, mixed mode)

안드로이드 에뮬레이터 실행을 위해서는 안드로이드스튜디오 설치가 필요합니다. Android Studio Download

안드로이드 설치를 진행하면서 해당 항목을 체크해줍니다.

• Android SDK
• Android SDK Platform
• Android Virtual Device
• Performance (Intel ® HAXM)

안드로이드 SDK 설치가 필요합니다. 안드로이드 스튜디오에서 Appearance & Behavior → System Settings → Android SDK 이동합니다. 또는 최초 실행시 우하단에 있는 configure → SDK Manager로 이동합니다.

SDK Platforms 탭의 오른쪽 하단에 있는 Show Packges Details 체크박스를 체크합니다.

Android 10 (Q)에서 해당 항목을 체크합니다.

• Android SDK Platform 29
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom System Image
• Google APIs Intel x86 Atom_64 System Image

터미널을 실행해서 프로젝트 경로에서 .bash_profile 또는 .zshrc 파일이 있는지 확인 해줍니다. 없으면 아래의 명령어로 생성해줍니다.

touch .bash_profile

ANDROID_HOME 환경설정이 필요합니다. ~/.bash_profile 또는 ~/.zshrc 설정파일을 열어서 아래 경로들을 추가합니다.

안드로이드 SDK 위치는 SDK Manager 창의 상단에 Android SDK Location에 써있습니다.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

만약 .bash_profile을 사용하는 경우 아래의 명령어를 실행해주세요

source ~/.bash_profile

또는

source ~/.zshrc

환경변수에 설정이 완료 된 후 터미널에 다음의 실행어를 입력합니다.

adb

설정이 완료되었다면 아래의 결과로 나옵니다.

Android Debug Bridge version 1.0.41
Version 31.0.3-7562133
Installed as /안드로이드 SDK 위치/platform-tools/adb

비쥬얼스튜디오코드로 프로젝트 파일을 오픈합니다. 그 후 아래의 실행어를 입력합니다

npm install

터미널에 react-native start를 실행 후 다른 터미널에 react-native run-android를 실행합니다.

npx react-native start

npx react-native run-android

터미널에서

Error type 3
Error : Activity class {com.component/com.component.MainActivty} does not exist.

해당 오류가 나온다면 실행된 에뮬레이터에서 앱을 다시 실행시키면 실행이 됩니다.