在React Native App中显示超链接

作者: 淋了一整夜的雨
发布时间: 2024-08-12 06:49:12 (4天前)
转自：

8 条回复

0#
回复此人
撩心 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 要做到这一点，我会强烈考虑包装 <code> Text </code> 组件中的 <code> TouchableOpacity </code> 。当一个 <code> TouchableOpacity </code> 被触摸，它消失（变得不那么不透明）。这为用户在触摸文本时提供了即时反馈，并提供了改进的用户体验。 </p> <P> 你可以使用 <code> onPress </code> 物业 <code> TouchableOpacity </code> 使链接发生： </p> <pre class="lang-js prettyprint-override"> <code> <TouchableOpacity onPress={() => Linking.openURL('http://google.com')}> <Text style={{color: 'blue'}}> Google </Text> </TouchableOpacity> </code> </pre> </DIV>

编辑
1#
回复此人
圈圈红 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H3> React Native文档建议使用 <code> Linking </code> ： </H3> <P> <a href="https://facebook.github.io/react-native/docs/0.57/linking#opening-external-links" rel="nofollow noreferrer"> 参考 </A> </p> <H3> 这是一个非常基本的用例： </H3> <pre> <code> import { Linking } from 'react-native'; const url="https://google.com" <Text onPress={() => Linking.openURL(url)}> {url} </Text> </code> </pre> <H3> 您可以使用功能或类组件表示法，经销商选择。 </H3> </DIV>

编辑
2#
回复此人
不想吃东西 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用React Native Hyperlink（Native <code> <A> </code> 标签）： </p> <P> 安装： </p> <pre> <code> npm i react-native-a </code> </pre> <P> 进口： </p> <pre> <code> import A from 'react-native-a' </code> </pre> <P> 用法： </p> <OL> <LI> <code> <A>Example.com</A> </code> </LI> <LI> <code> <A href="example.com">Example</A> </code> </LI> <LI> <code> <A href="https://example.com">Example</A> </code> </LI> <LI> <code> <A href="example.com" style={{fontWeight: 'bold'}}>Example</A> </code> </LI> </醇> </DIV>

编辑
3#
回复此人
نسر الصحراء | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果要进行链接和其他类型的富文本，可以使用更全面的解决方案 <a href="https://github.com/jsdf/react-native-htmlview" rel="nofollow"> React Native HTMLView </A> 。 </p> </DIV>

编辑
4#
回复此人
故人 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我以为我会和现在发现这个问题的人分享我的hacky解决方案 <EM> 嵌入式链接 </EM> 在一个字符串中。它试图的<strong> 内联链接 </强> 通过将字符串输入到其中的动态呈现它。 </p> <P> 请随意根据您的需要进行调整。它适用于我们的目的： </p> <P> 这是一个如何的例子 <a href="https://google.com" rel="nofollow noreferrer"> https://google.com </A> 会出现。 </p> <P> 的<strong> 在Gist上查看： </强> </p> <P> <a href="https://gist.github.com/Friendly-Robot/b4fa8501238b1118caaa908b08eb49e2" rel="nofollow noreferrer"> https://gist.github.com/Friendly-Robot/b4fa8501238b1118caaa908b08eb49e2 </A> </p> <pre> <code> import React from 'react'; import { Linking, Text } from 'react-native'; export default function renderHyperlinkedText(string, baseStyles = {}, linkStyles = {}, openLink) { if (typeof string !== 'string') return null; const httpRegex = /http/g; const wwwRegex = /www/g; const comRegex = /.com/g; const httpType = httpRegex.test(string); const wwwType = wwwRegex.test(string); const comIndices = getMatchedIndices(comRegex, string); if ((httpType || wwwType) && comIndices.length) { // Reset these regex indices because `comRegex` throws it off at its completion. httpRegex.lastIndex = 0; wwwRegex.lastIndex = 0; const httpIndices = httpType ? getMatchedIndices(httpRegex, string) : getMatchedIndices(wwwRegex, string); if (httpIndices.length === comIndices.length) { const result = []; let noLinkString = string.substring(0, httpIndices[0] || string.length); result.push(<Text key={noLinkString} style={baseStyles}>{ noLinkString }</Text>); for (let i = 0; i < httpIndices.length; i += 1) { const linkString = string.substring(httpIndices[i], comIndices[i] + 4); result.push( <Text key={linkString} style={[baseStyles, linkStyles]} onPress={openLink ? () => openLink(linkString) : () => Linking.openURL(linkString)} > { linkString } </Text> ); noLinkString = string.substring(comIndices[i] + 4, httpIndices[i + 1] || string.length); if (noLinkString) { result.push( <Text key={noLinkString} style={baseStyles}> { noLinkString } </Text> ); } } // Make sure the parent `<View>` container has a style of `flexWrap: 'wrap'` return result; } } return <Text style={baseStyles}>{ string }</Text>; } function getMatchedIndices(regex, text) { const result = []; let match; do { match = regex.exec(text); if (match) result.push(match.index); } while (match); return result; } </code> </pre> </DIV>

编辑
5#
回复此人
不丶离 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于React Native，有一个库可以在App中打开超链接。 <a href="https://www.npmjs.com/package/react-native-hyperlink" rel="nofollow noreferrer"> https://www.npmjs.com/package/react-native-hyperlink </A> </p> <P> 除此之外，我想你需要检查网址和最佳方法是正则表达式。 <a href="https://www.npmjs.com/package/url-regex" rel="nofollow noreferrer"> https://www.npmjs.com/package/url-regex </A> </p> </DIV>

编辑
6#
回复此人
滔滔江水 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 像这样的东西： </p> <P> 的<strong> IOS： </强> </p> <pre> <code> <Text style={{color: 'blue'}} onPress={() => LinkingIOS.openURL('http://google.com')}> Google </Text> </code> </pre> <P> 使用 <code> LinkingIOS </code> 与React Native捆绑在一起的模块。 </p> <P> 的<strong> 安卓： </强> </p> <pre> <code> <Text style={{color: 'blue'}} onPress={() => Linking.openURL('http://google.com')}> Google </Text> </code> </pre> <P> 使用 <code> Linking </code> 与React Native捆绑在一起的模块。 </p> </DIV>

编辑

登录后才能参与评论