뒤로가기 버튼 연동

Column
Tags
https://m.blog.naver.com/PostView.nhn?blogId=rlaalsdn456456&logNo=221592928131&proxyReferer=https:%2F%2Fwww.google.com%2F
 
하드웨어 백버튼 클릭 시
  • 기본적으로 웹뷰 내에서 히스토리로 goBack() 하도록 하고,
  • 웹뷰의 뒤로가기 히스토리가 없을 경우에는 네비게이션 화면전환이 되도록 하고싶은 경우.
 

함수형 예시

export const TossWebview = () => {
  const webviewRef = useRef<null | WebView>(null);
  const navigationInfo = useRef<null | WebViewNavigation>();

  useEffect(() => {
    const onBackPressed = () => {
      if (navigationInfo.current?.canGoBack) {
        webviewRef.current?.goBack();
        return true;
      }

      return false;
    };
    BackHandler.addEventListener('hardwareBackPress', onBackPressed);

    return () =>
      BackHandler.removeEventListener('hardwareBackPress', onBackPressed);
  }, []);

  return (
    <WebView
      ref={webviewRef}
      onNavigationStateChange={event => {
        navigationInfo.current = event;
      }}
      source={{
        html: htmlString,
      }}
    />
  );
};