gpt4 book ai didi

react-native-render-html - 按下链接时如何打开浏览器?

转载 作者:行者123 更新时间:2023-12-05 09:08:44 25 4
gpt4 key购买 nike

我使用的是 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>' />
);
}

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

最佳答案

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

重要提示

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

6.x

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

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 中,按下链接默认由 Linking API 处理,并且可以通过 onLinkPress 属性覆盖该行为。在 v4 上,您有责任处理链接。为此,使用 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}
/>
);
}

关于react-native-render-html - 按下链接时如何打开浏览器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63114501/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com