React-native-webView 不会在外部浏览器中打开新选项卡

Question

我在react-native-webview中添加了一个网站(https://www.roomvo.com/my/vekoal/rooms/615c4480f40c40c4ba624a8c2f2f3f23)，它是用Next.js开发的。在这个网站上，右侧菜单抽屉上有两个按钮，通过打开新的标签页来分享Facebook和Whatsapp，但它们都没有在react-native-webview中工作。我试着添加一些道具，我认为会帮助我，但没有成功。有人能帮我一下吗?

复制:

import React from 'react';
import { WebView } from 'react-native-webview'; 
const HomeScreen = props => { 
return (
<WebView source={{ uri: 'https://www.roomvo.com/my/vekoal/rooms/615c4480f40c40c4ba624a8c2f2f3f23' }} />
);
};
export default HomeScreen;

预期行为:我希望在手机默认浏览器外部打开一个新选项卡。

环境:

OS: Android
OS version: 9.0
Expo version: 4.1.0
Expo SDK version: 40.0.0
react-native version: 0.63
react-native-webview version: 11.0.0

Answer 1

这是你要找的吗?

import React from 'react';
import { WebView } from 'react-native-webview'; 
import { Linking } from 'react-native';
const HomeScreen = props => { 
const handleWebViewNavigationStateChange = (
newNavState
) => {
const {url} = newNavState;
//check if facebook or whatever you want
if(url.includes('facebook')){
Linking.openURL(url);
return false;
}
};
return (
<WebView 
onNavigationStateChange={handleWebViewNavigationStateChange}
source={{ uri: 'https://www.roomvo.com/my/vekoal/rooms/615c4480f40c40c4ba624a8c2f2f3f23' }} 
/>
);
};
export default HomeScreen;