Question

我在Webview组件下方，我希望在移动浏览器应用程序中打开链接，而不是在应用程序当前的Webview中打开链接。

return() {
    <WebView source={{ html: `<a href="https://www.google.com">Google</a>`}} />
}

Answer 1

您可以执行以下操作：

import { Linking } from 'react-native';

启动功能

Linking.openURL( some_url );

有关更多详细信息，请遵循以下完整示例：Just what you want

Answer 2

这对我有用。

 import { WebView, Linking, NavState } from 'react-native';    

const html = ` 
 <a href="https://www.google.com">Google</a>
 <a href="https://www.twitter.com">Twitter</a>
`

class WebViewWrapper extends Component {
    private webview;

    handleNavigationStateChange = (event: NavState) => {
        if (event.url) {
            this.webview.stopLoading();
            Linking.openURL(event.url);
        }
    };

    render() {
        return (
            <WebView
                originWhitelist={['*']}
                ref={ref => {
                   this.webview = ref;
                }}
                source={{ html }}
                onNavigationStateChange={this.handleNavigationStateChange}
            />
        );
    }
}

Answer 3

调用stopLoading将冻结WebView，并且一旦按下链接，链接可能会停止工作。最好使用onShouldStartLoadWithRequest（API Reference）。

所以代码看起来像这样：

import { Linking } from 'react-native';
import { WebView } from 'react-native-webview';

const html = ` 
 <a href="https://www.google.com">Google</a>
 <a href="https://www.twitter.com">Twitter</a>
`;

const shouldStartLoadWithRequest = (req) => {
  // open the link in native browser
  Linking.openURL(req.url);

  // returning false prevents WebView to navigate to new URL
  return false;
};

const MyComponent = () => (
  <WebView
    originWhitelist={['*']}
    source={{ html }}
    onShouldStartLoadWithRequest={shouldStartLoadWithRequest}
  />
);

export default MyComponent;

请注意，onShouldStartLoadWithRequest在iOS上的行为略有不同。

Answer 4

试试这个。这将节省您的时间和耐心:)

server = require('child_process').spawn('npm', ['run', 'start:dev'], {

也完全支持 android、ios 和 Expo。还有一些很酷的自定义功能，您可以尝试使用。
https://www.npmjs.com/package/react-native-render-html

如何从React Native的Webview内部在浏览器中打开外部链接？

4 个答案: