在React Native App中显示超链接

Question

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

例如

<a href="https://google.com>Google</a> 

Answer 1

事情是这样的：使用Linking模块与本机作出反应是捆绑的

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

。 （请注意，使用Linking需要React Native 0.20.0或更高版本。）

Answer 2

所选答案仅适用于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' 
    } 
}); 

Answer 3

如果你想要做的链接和其他类型的富文本的，更全面的解决方案是使用React Native HTMLView。

Answer 4

对于React Native，有库可以在应用程序中打开超链接。 https://www.npmjs.com/package/react-native-hyperlink

除此之外，我想你会需要检查网址和最好的方法是正则表达式。 https://www.npmjs.com/package/url-regex

Answer 5

为此，我会强烈考虑将Text组件包装在TouchableOpacity中。当碰到TouchableOpacity时，它会消失（变得不透明）。这在触摸文本时给予用户即时反馈并提供改进的用户体验。

您可以使用在TouchableOpacity的onPress属性，使链接发生：

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