개발/Javascript & Typescript

[RN] WebView 구현하기

devhooney 2024. 1. 24. 08:47
728x90

 

 

리액트 네이티브 버전 :  "react-native": "0.73.2"

 

 

 

 

728x90

 

 

 

1. 웹뷰 라이브러리 설치!

npm install react-native-webview

 

 

 

 

2. 코드 작성!

import React from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import { WebView } from 'react-native-webview';

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

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

 

 

 

SafeAreaView를 통해 아이폰 노치때문에 가리는것을 막아준다.

 

 

 

끝!

728x90