如何在按下 link 时打开浏览器？

How to open the browser when a link is pressed?

我正在使用 react-native-render-html 的 4.2.2 版。给定以下代码段：

# App.js
import React from 'react';
import HTML from 'react-native-render-html';

export default function App() {
    return (
        <HTML html='<a href="https://duckduckgo.com/">A Link To Press</a>' />
    );
}

我希望网络浏览器在我按下 link 时打开，但实际上没有任何反应。

注意：我更新了我的答案以包含版本之间的差异

重要提示

因为 Linkin.canOpenUrl has started requiring changing the android Manifest, there has been a bug 阻止 link 按 Android 打开浏览器。这已在版本 6.3.4 中 修复。所以一定要检查你的版本！

6.x

默认行为是使用 React Native Linking API 处理 link 按下事件。如果你需要自定义 link 新闻处理，你应该使用 renderersProps.a.onPress prop.

import React from 'react';
import RenderHTML from 'react-native-render-html';
import { useWindowDimensions } from 'react-native';

const renderersProps = {
  a: {
    onPress(event, url, htmlAttribs, target) {
      // Do stuff
    }
  }
}

export default function App() {
    const { width } = useWindowDimensions();
    return (
        <RenderHTML
            contentWidth={width}
            source={{ html: '<a href="https://duckduckgo.com/">A Link To Press</a>' }}
            renderersProps={renderersProps}
        />
    );
}

5.x & 4.x

在 v5 中，按 links 默认由 Linking API 处理，并且该行为可以被 onLinkPress prop 覆盖。在 v4 上，您有责任处理 links。为此，请使用 onLinkPress 来自 React Native 的 prop 和 Linking 实用程序。请注意，如果您使用的是 Expo，则应从 expo-linking.

导入 Linking 
import React from 'react';
import HTML from 'react-native-render-html';
import { Linking } from 'react-native';
// import * as Linking from 'expo-linking';

function openLink(event, url) {
    Linking.openURL(url);
}

export default function App() {
    return (
        <HTML
            html='<a href="https://duckduckgo.com/">A Link To Press</a>'
            onLinkPress={openLink}
        />
    );
}