React NativeのWebViewの中のリンクをブラウザで開く #reactnative

はじめに

アプリを作っている時に、全てネイティブで作るのではなく、WebViewを使ってコンテンツを表示したい時があると思います。さらにWebViewの中のリンクを押すとそこからブラウザに飛んで欲しい場面がたまにあります。
例えば、アプリ内のお知らせをHTMLで作成しwebViewで読み込むアプリで、自社のキャンペーンの紹介をする時にHTMLのリンクからブラウザで自社サイトに飛んで欲しい時などです。

やり方

1.LinkingとPlatformをインポートしておく

import { Linking, Platform } from 'react-native'

2.WebViewのオプションを設定する

onShouldStartLoadWithRequest={event => {
  const isExternalLink =
    Platform.OS === 'ios'
      ? event.navigationType === 'click'
      : true
  if (event.url !== 'about:blank' && isExternalLink) {
    Linking.openURL(event.url)
      return false
    }
  return true
}}

こうすることで、webView内のリンクを踏むとブラウザ開かれます。

isExternalLinkについて

isEternalLinkの記述がなくてもリンクを踏むとちゃんとブラウザが開きますが、iOSの場合webViewでページを開いた瞬間にLinkingが発火してブラウザに遷移してしまいます。
そこで、iOSの時にはリンクをクリックした時にのみLinkingが発火するようにしています。

return falseについて

なくてもリンクはブラウザで開きますが、アプリに戻ってきた時にwebViewの画面がリンク先のページになっているので、それを防いでいます。