1

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

# 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>' />
    );
}

当我按下一个链接时，我希望网络浏览器会打开，但相反，什么也没有发生。

4

1 回答 1

4

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

6.x

Linking默认行为是使用 React Native API处理链接按下事件。如果您需要自定义链接按下处理，您应该使用renderersProps.a.onPressprop.

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 中，按下链接默认由LinkingAPI 处理，并且该行为可以被onLinkPressprop 覆盖。在 v4 上，您有责任处理链接。为此，请使用React Native 中的onLinkPress prop 和实用程序。Linking小心，如果你使用 Expo，你应该Linking从expo-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}
        />
    );
}
于 2020-07-27T12:02:23.117 回答