如何在React Native应用中显示超链接?
e.g。
<a href="https://google.com>Google</a>
答案 0 :(得分:136)
这样的事情:
<Text style={{color: 'blue'}}
onPress={() => LinkingIOS.openURL('http://google.com')}>
Google
</Text>
使用与React Native捆绑在一起的LinkingIOS
模块。
答案 1 :(得分:17)
所选答案仅指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'
}
});
答案 2 :(得分:12)
为此,我强烈考虑将Text
组件包裹在TouchableOpacity
中。当触摸TouchableOpacity
时,它会变淡(变得不那么不透明)。这样,用户可以在触摸文本时立即获得反馈,并提供更好的用户体验。
您可以使用onPress
上的TouchableOpacity
属性进行链接:
<TouchableOpacity onPress={() => Linking.openURL('http://google.com')}>
<Text style={{color: 'blue'}}>
Google
</Text>
</TouchableOpacity>
答案 3 :(得分:6)
Linking
:import { Linking } from 'react-native';
const url="https://google.com"
<Text onPress={() => Linking.openURL(url)}>
{url}
</Text>
答案 4 :(得分:5)
要添加到上述响应中的另一个有用的注释是添加一些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>
答案 5 :(得分:2)
导入从React Native链接模块
import { TouchableOpacity, Linking } from "react-native";
尝试一下:-
<TouchableOpacity onPress={() => Linking.openURL('http://Facebook.com')}>
<Text> Facebook </Text>
</TouchableOpacity>
答案 6 :(得分:1)
对于React Native,有一个库可以在App中打开超链接。 https://www.npmjs.com/package/react-native-hyperlink
除此之外,我想你需要检查网址,最好的方法是Regex。 https://www.npmjs.com/package/url-regex
答案 7 :(得分:1)
使用React Native Hyperlink(本地<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>
答案 8 :(得分:1)
您可以使用链接属性 <文字样式= {{颜色:'天蓝色'}} onPress = {()=> Linking.openURL('http://yahoo.com')}> 雅虎
答案 9 :(得分:0)
如果您想要链接和其他类型的富文本,更全面的解决方案是使用React Native HTMLView。
答案 10 :(得分:0)
只是以为我会与现在通过字符串中的嵌入式链接发现此问题的任何人分享我的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;
}
答案 11 :(得分:0)
上面的代码会让你的文字看起来像超链接