[React Native] 웹뷰 제작 (feat. expo)

리엑트 네이티브 껍데기에 알맹이는 리엑트 웹사이트인 웹뷰를 제작한다.

---

Expo 프로젝트 시작하기

npx create-expo-app app-name

Ok to proceed? (y) y

EAS CLI 설치

npm install -g eas-cli

react-native-webview 라이브러리 설치

npx expo install react-native-webview

WebView 컴포넌트 불러오기

import * as React from "react";
import { WebView } from "react-native-webview";
import { StyleSheet } from "react-native";
import Constants from "expo-constants";

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: "your web site" }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
});

expo 회원가입

• 아래 사이트에 들어가 회원가입을 진행한다.

Expo

expo 로그인

• 아래 명령어를 쳐서 로그인을 진행한다. 

npx expo login

• 엑스포 사이트에 들어가서 create a project (새 프로젝트 생성)을 한다. 
• 그리고 나서  eax init --id [app id] <- 이부분을 복사하여 터미널에 붙여넣는다. 

Expo에 빌드하기

eas build -p android --profile preview

 

생성된 QR코드를 스캔하여 apk 파일을 받을 수 있다.