React Native - 如果链接具有目标 = "_blank"，则在默认浏览器中打开 Web 视图链接

Question

我有一个包含多个链接的WebView。如果其中一个链接被按下并且它有target = "_blank"属性如何在默认浏览器中打开它?

<WebView
ref={webViewRef}
source={{ uri: 'www.randomwebsite.com' }}
onNavigationStateChange={event => {
if (event.navigationType === 'click' ) { //how to test for **a href** with **target blank** ?
Linking.openURL(event.url);
}
}}
/>

Answer 1

下面是一个极简主义的例子

工作示例:https://snack.expo.io/@msbot01/upbeat-scone

import * as React from 'react';
import { View, Text, Image, Linking } from "react-native";
import { WebView } from 'react-native-webview';
import * as WebBrowser from 'expo-web-browser';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
uri: 'https://www.google.com/' 
}} 

render() {
return (


<WebView 
source={{ uri: this.state.uri }} 
onNavigationStateChange={ (event) => { 
console.log('::::::::'+event.url) 
console.log('+++++'+this.state.uri) 
if(this.state.uri !== event.url ){  
console.log('Match not found')
Linking.openURL(event.url);
}

}}

/>

)
}
}

Answer 2

expo install react-native-webview

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native';
import { WebView } from 'react-native-webview';
import * as WebBrowser from 'expo-web-browser';
export default () => {
const uri = 'http://localhost';
return (
<SafeAreaView style={{ flex: 1, backgroundColor: '#ffffff' }} >
<StatusBar style="dark" />
<WebView style={styles.container} source={{ uri }}
onShouldStartLoadWithRequest={(event) => {
if (!event.url.includes(uri)) {
WebBrowser.openBrowserAsync(event.url);
return false
} else {
return true
}
}}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginTop: 30
}
});