React Native에서 webView사용할 때, <a>태그로 링크 이동시 새탭으로 여는 방법 / (22.05.25)수정

**RN에서 webview를 이용할 때 html내용 안에 a 태그로 링크를 이동하는 코드가 있다. 그.런.데 새탭으로 켜지는게 아니라 webview안에서 보여주고 있어서 크기가 잘 맞지 않았다.

그래서 간단하게 webview의 a태그 링크이동을 새탭으로 열수있는 방법을 알아냈다.

• 수정된 코드
  auto height webview를 사용하느라 지저분해 보이긴 하지만 webView 태그랑 똑같다고 생각하면 된다.

  const webViewRef = useRef(null);

  const handleSetRef = _ref => {
    webViewRef = _ref;
  };

  const onNavigationStateChange = navState => {
    webViewRef.canGoBack = navState.canGoBack;
    if (!navState.url.includes('자신의 도메인 주소')) {
      // 새 탭 열기
      Linking.openURL(navState.url);
      return false;
    }
  };
  // 이 함수를 작동시키지 않으면 stopLoading() 문제로 인해 안드로이드에서 소스페이지의 다른 링크를 탭할 수 없습니다. 그래서 stopLoading를 방지하기 위해 아래 함수를 실행합니다.
  const onShouldStartLoadWithRequest = event => {
    if (!event.url.includes('자신의 도메인 주소')) {
      Linking.openURL(event.url);
      return false;
    }
    return true;
  };

<MinimalAutoheightWebView
          ref={handleSetRef}
          // 웹뷰 로딩이 시작되거나 끝나면 호출하는 함수 navState로 url 감지
          onNavigationStateChange={onNavigationStateChange}
          // 처음 호출한 URL에서 다시 Redirect하는 경우에, 사용하면 navState url 감지
          onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
          source={{
            html: decode(contentHtml),
            baseUrl: BACKEND_URL,
          }}
          bounces={false}
          scrollEnabled={false}
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          mixedContentMode="compatibility"
          allowFileAccessFromFileURLs
/>

자신의 도메인 주소를 제외하는것을 잊으면 안된다. 그걸 빼먹었더니 ios에서 오류가 발생했다.

---

서버에서 따로 url을 보내주는 작업없이 간단하게 해결할 수 있었다!