React native expo webview 프로젝트 생성

workspace 생성

D:\dev>mkdir reactnative
D:\dev>cd reactnative

node.js 별도 설치

 

node.js로 expo-cli 설치

D:\dev\reactnative> npm install expo-cli

프로젝트 생성

npx expo init {프로젝트명}

d:\dev\reactnative> npx expo init react_native_webview

  $ expo init is not supported in the local CLI, please use npx create-expo-app instead
에러가 발생할경우

npx create-expo-app {프로젝트명}

d:\dev\reactnative> npx create-expo-app react_native_webview
d:\dev\reactnative> cd react_native_webview

 

react-native-webview 설치

D:\dev\reactnative\react_native_webview> npx expo install react-native-webview
› Installing 1 SDK 48.0.0 compatible native module using npm
> npm install

added 2 packages, and audited 1242 packages in 3s

61 packages are looking for funding
  run `npm fund` for details

5 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

 

react-native-web 설치 (브라우저에서 확인하기 위해 별도 설치 - webview는 확인불가)

D:\dev\reactnative\react_native_webview> npx expo install react-dom react-native-web

 

 

프로젝트 실행

D:\dev\reactnative\react_native_webview>npm start

> react_native_webview@1.0.0 start
> expo start

Starting project at D:\dev\reactnative\react_native_webview
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █   █▄█▀▄▀█ ▄▄▄▄▄ █
█ █   █ █ ▀▄ █▀█ ▄█ █   █ █
█ █▄▄▄█ █▀██▀▀ ▀▄██ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄▀▄█ █ ▀▄█▄▄▄▄▄▄▄█
█▄ ██  ▄▀▀▀▀▄▀█▄▀▄██ ▀▄▄ ▄█
███ ▀▀█▄█▀█▀ ▄█▀▄▄▀ █▄  ▀██
█▀   ▀█▄▄▄█▄█▄▀▄ █▀▄▀▀▄ ▀██
███▀█▀▀▄▄▄▄ █▀██ ▀▄▀ ▄ ▀███
█▄▄██▄█▄▄ ▀█▄▀▀▄▀ ▄▄▄ ▀ ▄▄█
█ ▄▄▄▄▄ █▀ ▄ ▄██▀ █▄█ ▀▀█▀█
█ █   █ █▄ ▄█▄▀▄█ ▄ ▄▄▀   █
█ █▄▄▄█ █▀ ▀█▀██▀█▀▄▀█▀▀ ██
█▄▄▄▄▄▄▄█▄█▄▄▄▄▄███▄▄▄▄▄▄▄█

› Metro waiting on exp://172.30.1.41:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Press a │ open Android
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.

안드로이에서 실행은 a

web에서 실행은 w

.

.

 

 

App.js

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

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{ uri: 'https://naver.com' }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

※ 참조문서 : https://docs.expo.dev/versions/latest/sdk/webview/