如何在 React 本机应用程序中显示超链接？

我如何在一个反应本机应用程序中显示超链接？

例如:。

<a href="https://google.com>Google</a>
207624 次浏览
小开
最佳答案

就像这样:

<Text style=\{\{color: 'blue'}}
onPress={() => Linking.openURL('http://google.com')}>
Google
</Text>

使用与反应本机绑定的 Linking模块。

import { Linking } from 'react-native';
小开

选择的答案只涉及 iOS。对于这两个平台，您都可以使用以下组件:

import React, { Component, PropTypes } from 'react';
import {
Linking,
Text,
StyleSheet
} from 'react-native';


export default class HyperLink extends Component {


constructor(){
super();
this._goToURL = this._goToURL.bind(this);
}


static propTypes = {
url: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
}


render() {


const { title} = this.props;


return(
<Text style={styles.title} onPress={this._goToURL}>
>  {title}
</Text>
);
}


_goToURL() {
const { url } = this.props;
Linking.canOpenURL(url).then(supported => {
if (supported) {
Linking.openURL(this.props.url);
} else {
console.log('Don\'t know how to open URI: ' + this.props.url);
}
});
}
}


const styles = StyleSheet.create({
title: {
color: '#acacac',
fontWeight: 'bold'
}
});
小开

如果你想做的链接和其他类型的富文本，一个更全面的解决方案是使用 反应原生 HTMLView。

小开

对于反应本机，有库打开应用程序中的超链接。 Https://www.npmjs.com/package/react-native-hyperlink

除此之外，我想您还需要检查 url，最好的方法是正则表达式。 Https://www.npmjs.com/package/url-regex

小开

为此，我强烈地考虑将 Text组件包装在 TouchableOpacity中。当接触到 TouchableOpacity时，它会褪色(变得不那么不透明)。这使得用户在触摸文本时能够立即得到反馈，并提供了更好的用户体验。

您可以使用 TouchableOpacity上的 onPress属性来实现链接:

<TouchableOpacity onPress={() => Linking.openURL('http://google.com')}>
<Text style=\{\{color: 'blue'}}>
Google
</Text>
</TouchableOpacity>
小开

使用 React 本机超链接(本机 <A>标签) :

安装:

npm i react-native-a

进口:

import A from 'react-native-a'

用法:

  1. <A>Example.com</A>
  2. <A href="example.com">Example</A>
  3. <A href="https://example.com">Example</A>
  4. <A href="example.com" style=\{\{fontWeight: 'bold'}}>Example</A>
小开

React 本地文档建议使用 Linking:

参考文献

下面是一个非常基本的用例:

import { Linking } from 'react-native';


const url="https://google.com"


<Text onPress={() => Linking.openURL(url)}>
{url}
</Text>

您可以使用函数或类组件表示法，经销商可以选择。

小开

只是觉得我应该把我的解决方案分享给那些在字符串中使用 嵌入式链接发现这个问题的人。它尝试通过动态呈现 插入链接，并将任何字符串输入其中。

请随意调整它以满足您的需要。它正在为我们的目的而工作:

这是 https://google.com的一个例子。

点击查看大意:

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;
}
小开

从反应本机导入链接模块

import { TouchableOpacity, Linking } from "react-native";

试试看:-

<TouchableOpacity onPress={() => Linking.openURL('http://Facebook.com')}>
<Text> Facebook </Text>
</TouchableOpacity>
小开

另一个有用的注意事项添加到上述答复是添加一些柔性盒样式。 这将使文本保持在一行上，并确保文本不会与屏幕重叠。

 <View style=\{\{ display: "flex", flexDirection: "row", flex: 1, flexWrap: 'wrap', margin: 10 }}>
<Text>Add your </Text>
<TouchableOpacity>
<Text style=\{\{ color: 'blue' }} onpress={() => Linking.openURL('https://www.google.com')} >
link
</Text>
</TouchableOpacity>
<Text>here.
</Text>
</View>
小开

可以使用链接属性 < 文字风格 = \{\{ color: ‘ skyblue’}} onPress = {() = > Linking.openURL (‘ http://yahoo.com’)} > 雅虎

小开

< TouchableOpacity onPress = {() = > Linking.openURL (‘ http://yahoo.com’)} > < Text style = \{\{ textDecorationLine: ‘ underline’，color: ‘ blue }} > https://google.com

以上代码将使您的文本看起来像超链接

小开

我能够使用以下方法将可触摸的子字符串与周围的文本对齐。固定边距的数字有点粗糙，但是如果你不需要使用多个字体大小就可以了。否则，您可以将边距作为道具与 BaseText组件一起传递。

import styled, { StyledComponent } from 'styled-components'
import { View, Linking, Text, TouchableOpacity } from 'react-native'


type StyledTextComponent = StyledComponent<typeof Text, any, {}, never>


export interface TouchableSubstringProps {
prefix: string
substring: string
suffix: string
BaseText: StyledTextComponent
onPress: () => void
}


export const TouchableSubstring = ({
prefix,
substring,
suffix,
BaseText,
onPress,
}: TouchableSubstringProps): JSX.Element => {
const UnderlinedText = styled(BaseText)`
text-decoration: underline;
color: blue;
`


return (
<TextContainer>
<Text>
<BaseText>{prefix}</BaseText>
<TextAlignedTouchableOpacity onPress={onPress}>
<UnderlinedText>{substring}</UnderlinedText>
</TextAlignedTouchableOpacity>
<BaseText>{suffix}</BaseText>
</Text>
</TextContainer>
)
}


const TextContainer = styled(View)`
display: flex;
flex: 1;
flex-direction: row;
flex-wrap: wrap;
margin: 10px;
`


const TextAlignedTouchableOpacity = styled(TouchableOpacity)`
margin-top: 1px;
margin-bottom: -3px;
`
小开

下面是如何实现一个超链接，它出现下划线，并具有点击时改变颜色的 Web 标准行为(如 CSS a:active)。

import { Linking, Pressable, Text } from 'react-native';


<Pressable onPress={() => Linking.openURL('https://example.com')}>
{({ pressed }) =>
<Text style=\{\{
textDecorationLine: 'underline',
color: pressed ? 'red' : 'blue'
}}>I'm a hyperlink!</Text>
}
</Pressable>
  • 一些现有的答案与 TouchableOpacity一起使用 Text和 Linking，但是 医生认为 Pressable比 TouchableOpacity更“防止未来发生”，所以我们改用 Pressable。
  • Text本身实际上有一个 onPress()属性，所以 TouchableOpacity是不必要的，只是处理新闻界。然而，仅使用 Text似乎不可能实现颜色样式的更改。

提交答案