[RN] WebView 뒤로가기 구현하기

 

 

 

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

 

 

728x90

 

 

 

지난 포스팅에서 간단하게 웹뷰를 구현했는데 

해봤으면 문제를 알 수 있다.

웹뷰 상에서 뒤로가기가 안되고 앱이 꺼져버리는 문제인데,

 

이를 처리해줘야 한다.

 

 

1. 코드 작성

import React, { useEffect, useRef, useCallback } from 'react';
import { StyleSheet, SafeAreaView, BackHandler } from 'react-native';
import { WebView } from 'react-native-webview';

export default function App() {
  const webviewRef = useRef(null);
  const backPress = useCallback(() => {
    if (webviewRef.current) {
        webviewRef.current.goBack();
      return true; // prevent default behavior (exit app)
    }
    return false;
  }, []);

  useEffect(() => {
    BackHandler.addEventListener('hardwareBackPress', backPress);
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', backPress);
    };
  }, [backPress]);

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

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

 

 

 

2. 결과 확인

 

 

 

 

끝!