react-native-webview 백버튼 이슈 해결하기

냐옹·2024년 6월 25일

React Native

목록 보기

3/4

어플리케이션 안에서 react-native-webview를 통해서 내부 웹 뷰로 어떠한 페이지를 보여주는 중이다.

문제는 페이지 히스토리가 스택이기 때문에 차곡차곡 쌓아진다는 것이었는데, 백버튼은 pop()과 같은 동작을 수행하기 때문에 예를 들어서

Home -> 메뉴 1-> (메뉴바를 통해서) 메뉴2 -> (메뉴바를 통해서) 메뉴3

으로 이동했다고 쳐보자.

핸드폰의 어플리케이션으로 메뉴3을 보고있는 우리가 네비게이션 바의 백버튼을 눌렀을 때 기대하는 동작이 메뉴2로 가는 건 아닐 것이다. 아마 Home으로 가고 싶을 것이다.

const ref = useRef(null);
... react-native-webview 에다가 걸고 ...

ref.current?.injectJavaScript('... 자바스크립트...');

const ref = useRef(null);
... react-native-webview 에다가 걸고 ...

ref.current?.clearHistory();