Javascript 如何在 React Native App 中显示超链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30540252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does one Display a Hyperlink in React Native App?
提问by Will Chu
How do I display a hyperlink in a React Native app?
如何在 React Native 应用程序中显示超链接？
e.g.
例如
<a href="https://google.com>Google</a>
回答by Philipp von Weitershausen
Something like this:
像这样的东西：
<Text style={{color: 'blue'}}
onPress={() => Linking.openURL('http://google.com')}>
Google
</Text>
using the Linkingmodule that's bundled with React Native.
使用Linking与 React Native 捆绑在一起的模块。
回答by Kuf
The selected answer refers only to iOS. For both platforms, you can use the following component:
所选答案仅适用于 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'
}
});
回答by Tom Aranda
To do this, I would strongly consider wrapping a Textcomponent in a TouchableOpacity. When a TouchableOpacityis touched, it fades (becomes less opaque). This gives the user immediate feedback when touching the text and provides for an improved user experience.
为此，我强烈考虑将Text组件包装在TouchableOpacity. 当 aTouchableOpacity被触摸时，它会消失（变得不透明）。这为用户在触摸文本时提供即时反馈并提供改进的用户体验。
You can use the onPressproperty on the TouchableOpacityto make the link happen:
您可以使用 上的onPress属性TouchableOpacity来进行链接：
<TouchableOpacity onPress={() => Linking.openURL('http://google.com')}>
<Text style={{color: 'blue'}}>
Google
</Text>
</TouchableOpacity>
回答by jasonleonhard
React Native documentation suggests using Linking:
React Native 文档建议使用Linking：
Here is a very basic use case:
这是一个非常基本的用例：
import { Linking } from 'react-native';
const url="https://google.com"
<Text onPress={() => Linking.openURL(url)}>
{url}
</Text>
You can use either functional or class component notation, dealers choice.
您可以使用功能或类组件符号，经销商选择。
回答by Khalil Laleh
Use React Native Hyperlink (Native <A>tag):
使用 React Native Hyperlink（原生<A>标签）：
Install:
安装：
npm i react-native-a
import:
进口：
import A from 'react-native-a'
Usage:
用法：
<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>
<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>
回答by rajaishwary
for the React Native, there is library to open Hyperlinks in App. https://www.npmjs.com/package/react-native-hyperlink
对于 React Native，有一个库可以在 App 中打开超链接。 https://www.npmjs.com/package/react-native-hyperlink
In addition to this, i suppose you will need to check url and best approach is Regex. https://www.npmjs.com/package/url-regex
除此之外，我想你需要检查 url，最好的方法是 Regex。 https://www.npmjs.com/package/url-regex
回答by Eliot
If you want to do links and other types of rich text, a more comprehensive solution is to use React Native HTMLView.
如果要做链接等类型的富文本，更全面的解决方案是使用React Native HTMLView。
回答by Friendly-Robot
Just thought I'd share my hacky solution with anyone who's discovering this problem now with embedded linkswithin a string. It attempts to inline the linksby rendering it dynamically with what ever string is fed into it.
只是想我会与现在发现此问题的任何人分享我的hacky解决方案，并使用字符串中的嵌入式链接。它尝试通过使用输入的任何字符串动态呈现链接来内联链接。
Please feel free to tweak it to your needs. It's working for our purposes as such:
请随意调整它以满足您的需求。它适用于我们的目的：
This is an example of how https://google.comwould appear.
这是https://google.com显示方式的示例。
View it on Gist:
在 Gist 上查看：
https://gist.github.com/Friendly-Robot/b4fa8501238b1118caaa908b08eb49e2
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;
}
回答by Parveen Chauhan
Import Linking the module from React Native
从 React Native 导入链接模块
import { TouchableOpacity, Linking } from "react-native";
Try it:-
尝试一下：-
<TouchableOpacity onPress={() => Linking.openURL('http://Facebook.com')}>
<Text> Facebook </Text>
</TouchableOpacity>
回答by Stephanieraymos
Another helpful note to add to the above responses is to add some flexbox styling. This will keep the text on one line and will make sure the text doesn't overlap the screen.
添加到上述响应的另一个有用的注释是添加一些 flexbox 样式。这将使文本保持在一行上，并确保文本不会与屏幕重叠。
<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>
