[ReactNative]웹뷰사용하기 코드설명 / Code explanation for using webview

코드가 길지 않아 많은 설명이 필요하진 않지만 중요한 것만 얘기하겠습니다.
The code isn’t long so it doesn’t need much explanation, but I’ll just mention the important things.

웹뷰에서 접속 오류발생할 경우 아래의 포스트를 참고 하세요
If a connection error occurs in web view, please refer to the post below.

웹뷰에러/webview error

1.import
-import구문은 모듈을 추가하는 부분입니다.
The import statement is the part that adds modules.

-react,react-native,react-native-webview 모듈이 추가되어 있습니다.
The react,react-native,react-native-webview modules have been added.

import { StatusBar,StyleSheet, Text, View ,Dimensions } from 'react-native';
import { WebView } from 'react-native-webview';
import * as React from 'react';

2.웹뷰(webview)

-브라우저처럼 웹사이트를 보여주는 역할을 합니다.
It displays websites like a browser.

-그린컬러 부분이 웹뷰에 대한 코드입니다.
The green colored part is the code for the web view.

-웹뷰는 크기를 지정하지 않으면 모바일 화면에 보이지 않습니다.
The webview will not be visible on the mobile screen if you do not specify its size.

-이 코드는 웹뷰사이즈 화면 크기만큼 설정하는 부분입니다.
This code sets the web view size to the screen size.

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

-웹뷰 속성은 많지만 몇가지 중요한 것만 살펴보겠습니다.
There are many webview properties, but let’s look at just a few important ones.

source={{ uri: ‘https://freelifemakers.org’ }}
웹뷰실행시 오픈될 웹사이트 주소를 설정합니다.
Set the website address to be opened when running the web view.

allowsFullscreenVideo={true}
전체화면 기능을 사용하는 설정입니다.
This setting uses the full screen function.

allowsInlineMediaPlayback={true}
페이지 스크롤이나 동영상 플레이어 사이즈 변환시에도 동영상 재생을 멈추지 않게 합니다.
Video playback does not stop even when the page scrolls or the video player size changes.

javaScriptEnabled={true}
자바스크립트 사용을 허용하는 설정입니다.
This setting allows the use of JavaScript.

scalesPageToFit={true}
웹뷰크기를 페이지 크기에 맞게 설정합니다.
Set the webview size to match the page size.

domStorageEnabled={true}
html dom저장소를 사용합니다.
Uses html dom storage.

3.상태표시줄( Status Bar )
– 보라색 부분의 코드는 상태표시줄 부분 코드입니다.
The purple code part is the status bar code.
– 상태표시줄은 모바일 폰에서 시간,배터리량이 표시되는 부분입니다.
The status bar is the part of your mobile phone that displays the time and battery level.

      <StatusBar
        barStyle="light-content" // Options: 'default', 'light-content', 'dark-content'
        backgroundColor="#6a51ae" // For Android
        hidden={false}            // Show or hide the status bar
        translucent={true}        // Allow content to render under the status bar
      />

4.전체코드(full code)

import { StatusBar,StyleSheet, Text, View ,Dimensions } from 'react-native';
import { WebView } from 'react-native-webview';
import * as React from 'react';


const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

export default function App() {

  return (
    <View style={styles.container}>

      <Text>Web View</Text>
      <WebView style={styles.webview} 
      source={{ uri: 'https://freelifemakers.org' }}
      allowsFullscreenVideo={true}
      allowsInlineMediaPlayback={true}
      javaScriptEnabled={true}
      scalesPageToFit={true}
      domStorageEnabled={true}
      />
      <StatusBar
        barStyle="light-content" // Options: 'default', 'light-content', 'dark-content'
        backgroundColor="#6a51ae" // For Android
        hidden={false}            // Show or hide the status bar
        translucent={true}        // Allow content to render under the status bar
      />
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  //웹뷰 크기 지정 / Specify webview size
  webview: {
    flex: 1,
    width: windowWidth,
    height: windowHeight,
  },  
});

Leave a Reply Cancel reply