react-native WebView里的url使用浏览器打开

思路是用js阻止html页面a标签跳转，把要跳转的url地址传到react-native里，使用Linking打开应用进行跳转

具体实现步骤如下：

先简单写一段js代码(代码结尾必须要写分号，不然会出错的，我也不知道为什么)，这段代码的作用是获取html页面里的所有a标签，在点击它们的时候阻止默认跳转事件，并且把要跳转的url地址通过window.postMessage方法传到react-native

通过injectJavaScript方法把这段js注入到WebView加载进来的html中

_injectJavaScript = () => `
    var a = document.getElementsByTagName('a');
    for(var i = 0; i < a.length; i++){
        a[i].onclick = function (event) {
            window.postMessage(this.href);
            event.preventDefault();
        }
    }
`

使用onMessage方法接收html页面传过来要跳转的url地址，使用Linking打开应用进行跳转

_onMessage = (e) => {
    Linking.openURL(e.nativeEvent.data).catch(err => console.error('An error occurred', err))
}

完整代码如下

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

class AwesomeProject extends Component {
    _injectJavaScript = () => `
        var a = document.getElementsByTagName('a');
        for(var i = 0; i < a.length; i++){
            a[i].onclick = function (event) {
                window.postMessage(this.href);
                event.preventDefault();
            }
        }
    `

    _onMessage = (e) => {
        Linking.openURL(e.nativeEvent.data).catch(err => console.error('An error occurred', err))
    }

    render() {
        return (
            <WebView 
                onMessage={this._onMessage}
                style={{flex: 1}}
                source={{uri: 'http://www.jianshu.com'}}
                injectedJavaScript={this._injectJavaScript()}
            />
        )
    }
}

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject)