React-native expo-cli webview 사용 apk파일 만들기

webview 패키지를 먼저 설치해준다

> expo install react-native-webview

 

설치 완료후 App.js를 수정

 

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
  return (
    <WebView source={{uri:'페이지 url'}} style={{marginTop:20}} />
  );
}

 

marginTop : 20은 핸드폰의 맨위 상태바 때문에 조금 띄워준다

 

app.json에서 빌드할 앱 정보 변경

 

{
  "expo": {
    "name": "poohot",		<< 앱이름
    "slug": "poohot",		<< 앱참조명? 더 검색이 필요하다
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/logo1.png",	<<앱 아이콘 이미지
    "splash": {
      "image": "./assets/logo1.png",	<<앱 실행시 잠깐 뜨는 이미지
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {	<< ios 설정
      "bundleIdentifier": "com.poozim.poohot",
      "buildNumber": "1.0.0",
	  "supportsTablet": true
    },
    "android": { <<android 설정
      "package": "com.poozim.poohot",
      "versionCode": 1,
	    "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
	  "permissions": ["READ_EXTERNAL_STORAGE"]
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

일단 안드로이드로만 확인할 예정이기 때문에 안드로이드 설정 permissions에 앨범 접근만 허용해주었다.

 

> expo build:android

안드로이드 빌드를 한다.

 

중간에 expo 로그인

파일형식

키스톤 여부를 묻는 질문이 뜬다.

 

빌드는 약 20분정도 걸린듯하다. 첫 빌드인 만큼 상당히 오래걸린다.

 

빌드를 대기하는 Build queued 문구가 보이는데

중간에 링크가 하나뜬다.

이 링크를 들어가면 Expo 페이지에서 대시보드로 상태 확인이 가능하다.

 

기다리다보면 status가 finished로 되는데 다운로드를 누르면 apk 다운로드가 된다.

 

모바일에서 다운로드하는경우 카카오 브라우저로 다운로드하면 .apk이 아닌 .bin파일로 다운로드가된다. 네이버앱으로 받아주자

중간에 경고가 뜨는데 우리가 빌드한 파일이니 무시하고 설치를 한다.

 

앱개발 안해본 티가 나게 위에가 좀 짤린다.