React Native 로 webview 만 있는 앱 만들기

Posted on Edited on In , Word count in article: 293 Reading time ≈ 1 mins.

리액트네이티브로 WebApp 만들기

아주 빠르게 App 을 만들어 보려는 목적이다

목표로 잡은 WebAPP 은 DOS 게임 APP

추억이 있는 레트로 게임을 내가 모바일로 즐기고 싶어서

개발단계

리액트네이티브 개발환경 설정 해주기

1
2
3
4
5
6
7
## homebrew 설치 라이브러리 업데이트
brew upgrade
## 이전 버전 react native cli 있으면 삭제
npm uninstall --location=global react-native-cli

## DOS 용의 기사 2 한글판 프로젝트 APP 초기 생성
npx react-native init dragonKnight2

앱 이름 바꾸기

안드로이드는
/android/app/src/main/res/values/strings.xml

1
2
3
<resources>
    <string name="app_name">용의기사2</string>
</resources>

iOS 는 /ios/프로젝트이름/info.plist

1
2
<key>CFBundleDisplayName</key>
<string>용의기사2</string>

패키지명 바꾸기

패키지명은 라이브러리 많아지면 안드로이드는 Hell 이 된다
초반에 빨리 바꿔주자

React Native 로 패키지 이름 바꾸기

webview 설치

1
npm install react-native-webview

안드로이드, iOS 설정

android 폴더의 gradle.properies 에 설정 확인

1
2
android.useAndroidX=true
android.enableJetifier=true

iOS 는 pod 한번 실행

1
2
## iOS 는 항상 pod install 실행
cd ios && pod install && cd ..

프로젝트 폴더구조

1
2
3
index.js
  - src/App.js
  - src/components/MyWebView.js

MyWebView.js 에서 불러올 URL 또는 html 파일을 넣어주면 된다

외부 URL 을 사용하거나 HTML 태그를 넣을때 위와 같이하고

APP 내부에 html, css, js 를 넣을 때는 또 다른 방법을 사용해야 한다

React Native 로 local html을 webview 에 적용하기

앱 아이콘 생성 및 설정

Appicon 사이트에서 1024x1024 사이즈 이미지를 넣어서 아이콘 세트를 만든다

아이콘 세트는 안드로이드용 5개 폴더와 각 폴더안에 이미지가 생성된다

안드로이드는 /android/app/arc/main/res 에 생성된 폴더를 덮어쓰기 한다

iOS 는 /ios/프로젝트이름/images.xassets/AppIcon.appiconset/ 에 32개 파일을 덮어쓰기 한다

1
2
3
4
5
## 안드로이드 확인
npx react-native run-android

## iOS 확인
npx react-native run-ios

최종확인

1
2
3
4
5
## 안드로이드 확인
npx react-native run-android

## iOS 확인
npx react-native run-ios

원하는 데로 APP 이 생성되었는지 확인해본다

연관포스트