要做到这一点,我会强烈考虑包装 Text 组件中的 TouchableOpacity 。当一个 TouchableOpacity 被触摸,它消失(变得不那么不透明)。这为用户在触摸文本时提供了即时反馈,并提供了改进的用户体验。
Text
TouchableOpacity
你可以使用 onPress 物业 TouchableOpacity 使链接发生:
onPress
<TouchableOpacity onPress={() => Linking.openURL('http://google.com')}> <Text style={{color: 'blue'}}> Google </Text> </TouchableOpacity>
Linking
参考
import { Linking } from 'react-native'; const url="https://google.com" <Text onPress={() => Linking.openURL(url)}> {url} </Text>
使用React Native Hyperlink(Native <A> 标签):
<A>
安装:
npm i react-native-a
进口:
import A from 'react-native-a'
用法:
<A>Example.com</A>
<A href="example.com">Example</A>
<A href="https://example.com">Example</A>
<A href="example.com" style={{fontWeight: 'bold'}}>Example</A>
如果要进行链接和其他类型的富文本,可以使用更全面的解决方案 React Native HTMLView 。
我以为我会和现在发现这个问题的人分享我的hacky解决方案 嵌入式链接 在一个字符串中。它试图 的 内联链接 强> 通过将字符串输入到其中的动态呈现它。
请随意根据您的需要进行调整。它适用于我们的目的:
这是一个如何的例子 https://google.com 会出现。
的 在Gist上查看: 强>
https://gist.github.com/Friendly-Robot/b4fa8501238b1118caaa908b08eb49e2
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; }
对于React Native,有一个库可以在App中打开超链接。 https://www.npmjs.com/package/react-native-hyperlink
除此之外,我想你需要检查网址和最佳方法是正则表达式。 https://www.npmjs.com/package/url-regex
像这样的东西:
的 IOS: 强>
<Text style={{color: 'blue'}} onPress={() => LinkingIOS.openURL('http://google.com')}> Google </Text>
使用 LinkingIOS 与React Native捆绑在一起的模块。
LinkingIOS
的 安卓: 强>
<Text style={{color: 'blue'}} onPress={() => Linking.openURL('http://google.com')}> Google </Text>
使用 Linking 与React Native捆绑在一起的模块。