리액트 네이티브 웹뷰 만들기

1. Expo (React Native) + WebView 활용하기

• 개요: React Native의 react-native-webview 라이브러리를 사용하여 모바일 웹을 웹뷰로 감싸서 어플로 포장합니다.
• 과정:
  1. Expo 프로젝트를 생성합니다.
      

     npx expo init WebViewApp
  2. 프로젝트에 react-native-webview 패키지를 설치합니다.
      

     npm install react-native-webview
  3. App.js 파일에 웹뷰 설정을 추가합니다.
      

      
  4. Expo CLI를 통해 디바이스에서 앱을 테스트하거나 Expo의 배포 옵션을 통해 APK나 IPA로 빌드하여 배포할 수 있습니다.

import React from 'react'; 
import { WebView } from 'react-native-webview'; 
export default function App() {
	return ( <WebView source={{ uri: 'https://your-web-app-url.com' }} /> ); 
}

 

 

5. expo 로그인 후 빌드

권한 에러시 윈도우 파워쉘을 관리자 권한으로 열고 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser 명령어 치기

expo login

expo build:android

6. 로컬빌드 안된다 해서 글로벌 빌드로 함

npm install -g eas-cli

eas build:configure

eas build -p android

 

7. 오류나서
app.json 에 추가

npx expo install --check 버젼체크 하고

eas build -p android 다시 원격 빌드

{
  "expo": {
    "sdkVersion": "51.0.0",
    "name": "찾아감",
    "slug": "webview",
    "extra": {
      "eas": {
        "projectId": "fcaee5a7-fbdf-463e-8486-947a38da8087"
      }
    },
    "android": {
      "package": "com.concho.webview"
    },
    "ios": {
      "bundleIdentifier": "com.concho.webview"
    },
    "splash": {
      "backgroundColor": "#FFFFFF"
    }
  }
}

 

 

빌드는 성공했는데 떨어진 파일이 aab라서 

bundletool-all-1.17.2.jar 다운받고

cd C:\Users\HA\Downloads

java -jar bundletool-all-1.17.2.jar build-apks --bundle=lost.aab --output=lost.apks --mode=universal

로 apks 로 변환
apks 확장자를 zip 파일로 변환

zip 으로 이름만 바꿔준 후 압축 해제

apk 파일 나옴