웹뷰 ios 에러

웹앱을 RN에 넣기

데스크탑으로 375 x 812의 앱이 모바일앱으로 잘돌아가는 것을 확인한 후
웹앱을 webview형식으로 RN에 삽입하였더니 ios에서 이상한 현상이 발생하였다. (android는 웹과 동일한 형태로 보였음)

전체 사이즈 이상 현상

정상적인 사이즈

ios 시뮬레이터에서 보여진 사이즈

원인 : 웹앱에서는 rem단위로 크기를 설정했는데 ios에서는 제대로 동작하지 않았음
해결책 : 전체 rem단위를 px로 조정

버튼의 크기 이상

정사각형태의 버튼이 ios에서는 찌그러진 형태로 보였음
ios에서 width를 아무리 줄여도 반영이 되지 않았다.

원인: ios 에서 button 태그를 렌더링할 때 패딩이 default 패딩이 적용되어 있었음
해결책: 이 값을 0으로 설정한 후 웹/ios 모두 동일한 사이즈로 보이게끔 설정

카드 렌더링 오류

웹(왼쪽 화면)에서는 렌더링 오류가 없는데 ios(오른쪽 시뮬레이터)에서는 svg파일이 제대로 로드되지않는 문제가 발생하였다

해결책

화면에서 보다시피 오류에 패턴이 존재했는데 한번 렌더링된 이미지들은 두번째 렌더링에서 오류가 발생하지 않았음. ( 최초 렌더링 시 오류 발생 )

따라서 화면이 시작될 때 이미지를 렌더링하는 컴포넌트 밑에 모든 이미지들을 한번 로드시킨다.
(이때 이 이미지들을 화면에 보여주면 이상하므로 opacity:0으로 처리한다.)
잠깐동안 렌더링 시킨 후 바로 모든 이미지들을 삭제하여 정상적인 초기상태를 만든다.

이런 로직을 웹,안드로이드에서 적용할 필요는 없으므로 RN에서 최초 앱 로드 시 기기 정보를 전송하게 하고 ( ex - platform: ios ) ios일 때만 해당 로직을 적용한다.

  const [selectedCards, setSelectedCards] = useState<any>([]);

 const { platform } = useStore();
  const [fake, setFake] = useState(true);
  useEffect(() => {
    if (platform === 'ios') {
      setSelectedCards(initialCards); // 모든 카드를 삽입

      setTimeout(() => {
        setFake(false);
        setSelectedCards([]);
      }, 100);
    } else {
      setFake(false);
    }
  }, []);


return(
  ...
      <Selected fake={fake as boolean}>
     ...
      </Selected>
...
  )

const Selected = styled.div<{ fake: boolean }>`
...
  opacity: ${({ fake }) => (fake ? 0 : 1)}; 

이를 통해 카드 렌더링 오류도 해결할 수 있었다.