Thi*_*ame 3 react-native-render-html
我正在使用 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>' />
);
}
我希望当我按下链接时网络浏览器会打开，但什么也没有发生。
Jul*_*lph 10
注意：我已经更新了我的答案以包括版本之间的差异
由于Linkin.canOpenUrl 已开始要求更改 android Manifest，因此存在阻止按下链接以在 Android 中打开浏览器的错误。此问题已在版本 6.3.4 中修复。所以一定要检查你的版本！
默认行为是使用 React Native LinkingAPI 处理链接按下事件。如果您需要自定义链接按下处理，您应该使用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}
/>
);
}
Linking在 v5 中，按链接默认由 API 处理，并且可以通过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}
/>
);
}