react webview打开html5,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 (

onMessage={this._onMessage}

style={{flex: 1}}

source={{uri: 'http://www.jianshu.com'}}

injectedJavaScript={this._injectJavaScript()}

/>

)

}

}

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