[ReactNative]웹뷰사용하기 / Using webview

이번에는 리액트네이티브에서 간단하게 웹뷰를 구현해 봅니다.
This time, we will simply implement a web view in React Native.

웹뷰는 모바일에서 웹페이지를 볼 수 있게 해주는 모듈 입니다.
Webview is a module that allows you to view web pages on mobile devices.

리액트네이티브는 자바스크립트와 타입스크립트를 모두 사용 할 수 있습니다.
React Native can use both JavaScript and TypeScript.

여기서는 자바스크립트를 사용할 예정입니다.
We will be using JavaScript here.

1.index.js파일 코드 내용( code of index.js file)

이 코드는 파일이 App인 파일을 호출 하는 코드 입니다.
This code calls the file that name is App.

앱이 실행될때 index.js파일이 실행되고 index.js파일에서 App.tsx나 App.js파일을 호출합니다.
When the app runs, the index.js file is executed and the index.js file calls the App.tsx or App.js file

2.App.tsx파일 이름 변경(Change App.tsx file name)

-자바스크립트를 사용하기위해서 타입스크립트 파일의 이름을 바꿉니다.
Rename the TypeScript file to use JavaScript.

3.App.js파일 만들기(Create App.js file)

4.App.js에 코드 입력(Enter code in App.js)

5.react-native-webview모듈설치(Install react-native-webview module)

6.모듈설치확인(Check module installation)
-npm run android로 앱을 실행 합니다.
Run the app with npm run android.

7.앱실행화면(App execution screen)

-npm run android로 앱을 실행 합니다.
Run the app with npm run android.

-비주얼 스튜디오 코드에서 실행된 화면입니다.
This is a screen executed in Visual Studio Code.

-가운데 메트로 화면은 npm run android실행시 자동으로 실행됩니다.
The metro screen in the middle runs automatically when you run “npm run android”.

-모바일폰에서 실행된 화면,왼쪽 이미지는 앱실행된 화면,오른쪽 이미지의 App1아이콘은 앱 설치된 화면입니다.
Screen running on a mobile phone. The image on the left is the screen with the app running, and the App1 icon in the image on the right is the screen with the app installed.

8.App.js전체코드(App.js full code)

– 코드설명은 다음 포스트에서 하겠습니다.
Code explanation will be provided in the next post.

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',
  },
  //웹뷰 크기 지정
  webview: {
    flex: 1,
    width: windowWidth,
    height: windowHeight,
  },  
});