2017-08-06

WebViewSample.js

// 外部ブラウザで開く例

import React, { Component } from 'react'
import { Alert, Linking, WebView } from 'react-native'

const ATS_ERROR_CODE = -1022

export default class WebViewSample extends Component {
  constructor(props) {
    super(props)
    this.handleError = this.handleError.bind(this)
    this.openUrl = this.openUrl.bind(this)
  }

  handleError(proxy) {
    const { code } = proxy.nativeEvent
    const { url } = this.props
    if (code === ATS_ERROR_CODE) {
      this.openUrl(url)
    }
  }

  openUrl(url) {
    Linking.canOpenURL(url).then(supported => {
      if (supported) {
        Linking.openURL(url)
      } else {
        Alert.alert('URLを開けませんでした。')
      }
    })
  }

  render() {
    const { url } = this.props
    return <WebView source={{ uri: url }} startInLoadingState onError={this.handleError} />
  }
}