[react-native] react 로 만든 web 사이트를 android / ios 앱으로 만들기 (webview 이용)

과정 소개

1. React Native 설치
2. 새 프로젝트 생성
3. webview 추가
4. 앱 아이콘 변경
5. 앱 테스트

과정 1. React Native 설치

$ npx create-expo-app (프로젝트명)

위 과정으로 react native가 자동 설치됨

과정 2. 새 프로젝트 생성

위 과정으로 이미 프로젝트가 생성됨

과정 3. webview 추가

webview 설치:

$ npx expo install react-native-webview

 

webview 생성:

• App.js 수정
• 기존 App.js 내용 모두 삭제

관련 코드:

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default function App() {
  return (
    <WebView
      source={{ uri: 'https://(당신의 web 사이트 주소)' }}
    />
  );
}

과정 4. 앱 테스트 (Expo 앱)

전제 사항:

• 컴퓨터와 핸드폰이 WIFI를 공유해야함

터미널 내 앱 실행:

npx expo

expo go 앱 설치:

• google playstore: Expo Go
• apple appstore: Expo Go

QR code 스캔:

(대상 QR code: 터미널 내 앱 실행 후 터미널 내 뜨는 QR code)

• android: Expo go 앱 사용
• ios: 카메라 앱 사용

과정 5. 앱 아이콘 변경

icon.png 정보:

• size: 1024 x 1024

splash.png 정보:

• size: 1284 * 2778

adaptive-icon.png 정보:

• size: 1024 x 1024

icon.png, splash.png, adaptive-icon.png 생성:

• https://www.iconikai.com/generate-icon 활용
  • icon description 을 영어로 작성 
  • 생성된 아이콘으로 파일 교체

과정 6. 앱 테스트 (모바일)

eas-cli 설치:

$ npm install -g eas-cli

• permission denied 나오면 sudo 사용

expo 가입:

https://expo.dev/signup

Sign Up — Expo

 

eas 로그인:

$ npx eas login

 

eas 빌드:

 $ npx eas build:configure

• prompt 나올 시 "Y"

 

eas.json 작성:

• eas.json에 다음 내용 추가

......

  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    },
    "production": {}
  }
  
......

 

android 빌드:

• 질문 나오면 엔터

eas build -p android --profile preview

 

android emulator 실행:

• android studio 설치 필요

eas build:run -p android

 

ios 빌드:

• com.(user app id)

eas build -p ios --profile preview

 

ios emulator 실행:

• xcode 설치 필요

eas build:run -p ios