思路是用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)
