mminky's

webview와 react native를 이용해 간단한 안드로이드 앱을 만들기 위해서는 다음이 준비되어야합니다.

1. cmd(명령 프롬프트 창)

2. npm, node설치 (cmd창에서 npm -v, node -v 등의 명령어로 확인가능)

3. Visual Studio Code

4. expo-cli 설치

https://mminky.tistory.com/32

5. WebView 설치(https://www.youtube.com/watch?v=Y422rxe6XRU)

6. 안드로이드 스튜디오(시뮬레이터)

---------------------------------------------------------------------------------------------------------------------

1) 안드로이드 스튜디오의 시뮬레이터인 AVD를 실행시킵니다.

2) 윈도우검색->cmd 혹은 명령프롬프트 창을 검색 후 실행시킵니다.

cd Document

-> Document 디렉토리(폴더)로 이동

expo init 프로젝트명

-> expo 프로젝트 생성

cd 프로젝트명

-> 해당 프로젝트 프로젝트 폴더로 이동

expo install react-native-webview

-> webview 설치

3) Visual Studio Code 열기

파일검색기창을 연 후 Documents(문서)폴더로 이동합니다.

거기서 프로젝트폴더(project_0714)를 visual studio code창으로 드래그&드랍 합니다.

그리고 App.js의 내용을 다음과 같이 변경합니다.

//App.js
import React from 'react';
import { WebView } from 'react-native-webview';
 
export default class App extends React.Component {
  render(){
    return(
      <WebView
      source={{uri:'https://google.com'}}
      style={{marginTop:20}}
      />
    );
  }
}

ctrl+s로 저장합니다.

3) cmd창

npm start

-> 해당 프로젝트 프로젝트 폴더로 이동 후 실행

인터넷 창이 뜨면 Android~를 클릭합니다.

그리고 cmd창에 qr코드창이 나오면 'a'키를 눌러서 시뮬레이터로 실행시킵니다.

[결과]

[React Native]란 하이브리드 앱 개발 프레임을 의미합니다.

아래 영상에 react native와 flutter에 대한 설명이 잘 되어있는 것 같아 링크 첨부합니다.

www.youtube.com/watch?v=siow15Yn8r8

react native의 개발 방법에는 2가지가 있습니다.

expo-cli와 react native cli입니다.

그 중 저는 expo-cli를 설치했습니다.(아래 영상 참고)

www.youtube.com/watch?v=0DhQd_EK1Ng&t=183s

결론부터 말씀드리자면 File > Open으로 열었기 때문에 project로만 뜨는 것 입니다.

따라서 File > New > Import Project를 해야 제대로 열리는 것을 확인 할 수 있습니다.

[ Open으로 열었을 때 ]

Android라는 글도 보이지 않고

빌드도 할 수 없습니다.(Add configuration이라는 글자만 나타남)

[ Import Project로 열었을 때 ]

Android에서

app > manifests > AndroidManifest.xml파일

위의 사진에서 보면 MainActivity에만 <intent-filter>~</intent-filter>가 있다.

이 코드가 붙은 곳이 제일 처음 실행되는 화면으로 설정된다.

예를 들어

<activity android:name=".bulletin_board"/>

<intent-filter>

~~

</intent-filter>

</activity> 이렇게 되어있었으면 앱을 실행시켰을 때 .bulletin_board가 먼저 실행 된다