Eojin Han

웹뷰 연동

1) 로그인 → 메인화면

로그인 화면은 RN으로 구현 / 메인은 웹뷰로 구현.

프론트에서 쿠키가 아닌, 로컬스토리지에 저장된 데이터를 확인하는 ~~이상한 로직~~이 구현되어 있음.

웹뷰 생성 전 자바스크립트 삽입으로 로컬스토리지에 값을 써줘야 정상적으로 화면 처리됨.


window.localStorage.setItem('값1', '${값1}');
window.localStorage.setItem('값2', '${값2}');

2) 강의장

수강생의 수강시간을 엄격하게 측정해야하는 서비스. 프론트에서 강의변경 등 이벤트에도 서버에 트랜잭션 요청을 하긴 하나, 뒤로가기에는 아무 처리가 없는 ~~이상한 로직~~으로 구현되어 있다. 강의장을 빠져나갈 때에는 무조건 강의장 나가기 버튼을 눌러야한다고 한다.

따라서 모바일에서는 안드로이드 사용자가 뒤로가기 물리버튼을 눌렀을 때, 웹뷰 내의 강의장나가기 버튼 이벤트를 발생시켜줘야함, 자바스크립트 삽입이 필요하다.


const injectScript = `
  if( window.location.toString().split(new RegExp('.*/student/classroom/[^/\\n]*')).pop() == "" ){
    document.getElementsByClassName('강의장 나가기 버튼')[0].click();
  }else
  {
    window.history.go(-1);
  }
`;

3) 포럼, 과제

두 탭은 전환이 많은 탭이므로 뒤로가기 이벤트 처리가 중요하다.

웹뷰에 history가 있다면 웹뷰의 뒤로가기 로직을 태우고

없다면 탭 네비게이션의 뒤로가기 로직을 태워야한다.

물리 버튼에 맵핑된 함수를 재정의함.

포럼

과제


/**
 * 뒤로가기 이벤트 처리 함수
 */
let onBackPressed = () => {};
if (isBackButtonRequired) {
  switch (Platform.OS) {
    case 'ios':
      onBackPressed = () => onIosBackPressed({ data });
      break;
    case 'android':
      onBackPressed = () => onAndroidBackPressed({ data });
      break;
    default:
      //  물리버튼에 맵핑되어있는 기능 그대로 사용. (변화없음)
      onBackPressed = () => onDefaultBackPressed();
  }
}

useEffect(() => {
	// 뒤로가기 물리버튼 함수 재정의
  BackHandler.addEventListener('hardwareBackPress', onBackPressed);

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


export const onAndroidBackPressed = ({ data }) => {
  const { ref, canGoBack } = data;

  // 웹뷰 뒤로가기가 되는 상황
  if (ref && canGoBack) {
		// 웹뷰 뒤로가기
    ref.injectJavaScript(injectScript);
    return true;
  }

  // 일반적인 물리버튼 뒤로가기
  return false;
};