[앱] React-Native Hello World

1. 개발환경

개발툴: VSC(Visual Studio Code)

패키지 매니저: npm(node.js, recact.js, react native 설치)

DB: Maria DB

DBMS: HeidSQL

2. 설치

2-1. npm

자바스크립트를 위한 패키지 매니저 > node.js를 설치하면 사용 가능

 

2-2. React-Native-Cli

$ npm install -g react-native-cli

 

2-3. VSC(Visual Studio Code)

IDE 개발툴 > VSC 설치

 

2-4. VSC(Visual Studio Code)

react-native init (프로젝트명)

File - Open Folder에서 생성 프로젝트 폴더 열기

메인 파일 App.js

 

2-5. Android Studio

에뮬레이터 사용을 위해 설치

 

[설정]
1) ANDROID_SDK_ROOT SDK 설치
2) SDK 환경변수 추가(환경변수 편집 이후에는 커맨드창을 또 닫고 새로 열어야 적용된다)
3) Android Studio > Tools > SDK Manager > SDK Tools 탭 이동 > Google Play Licensing Library 항목 추가

2. 코드 변환 구조

Javascript 코딩 -> react 컴포넌트 -> react Native 플랫폼 -> iOS, 안드로이드 Native 코드 변환

4. 기타 사항

react의 규칙 이용 -> 모바일 앱 개발

Bridge는 iOS, Android 네이티브 코드 접근

5. 오류사항

※ HAXM 설치 시 에러

Hyper-V 비활성화(Intel 가상화)
VT-D 비활성화(AMD 가상화)

※ JAVA_HOME is not set and no 'java' command could be found in your PATH

환경변수명: JAVA_HOME

환경변수경로: C:\Program Files\Android\Android Studio\jre 추가(예시)

※ Could not launch emulator in Android Studio

안드로이드 에뮬레이터가 설치되지 않은 문제
Android > Tools > AVD Manager > Android Virtual Device Manager 열고 실행

※ 구글 플레이 라이센스 문제
Android Studio > Tools > SDK Manager > SDK Tools 탭 이동 > Google Play Licensing Library 항목 추가

5. Hello World Code

App.js > HelloWorld 컴포넌트 생성 > 빌드

 

 

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

export default class HelloComponent extends Component {

render() { 
     return ( // justifyContent:가로정렬, alignItems:세로정렬 
         <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> 
             <Text>Hello World</Text> 
            </View> 
        ); 
    } 
}

 

 

- 참조-
https://reactnative.dev/docs/tutorial: Code 프리뷰
https://snack.expo.io/ > 프로젝트 및 코드 작성, 빌드 확인 가능 
https://yuddomack.tistory.com/entry/1React-Native-%EC%84%A4%EC%B9%98%EC%99%80-%EC%8B%A4%ED%96%89hello-world > 참조 사이트