Hyperlink in React Native App anzeigen

Question

Wie kann ich einen Hyperlink in einer React Native App anzeigen?

z.B.

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

Answer 1

Etwas wie folgt aus:

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

mit dem Linking-Modul, das mit der gebürtigen React gebündelt wird. (Beachten Sie, dass die Verwendung von Linking React Native 0.20.0 oder höher erfordert.)

Answer 2

Die ausgewählte Antwort bezieht sich nur auf iOS. Für beide Plattformen können Sie die folgende Komponente verwenden:

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

Wenn Sie Links und andere Arten von Rich-Text tun wollen, eine umfassendere Lösung ist React Native HTMLView zu verwenden.

Answer 4

für die React Native, gibt es eine Bibliothek zum Öffnen von Hyperlinks in der App. https://www.npmjs.com/package/react-native-hyperlink

Zusätzlich dazu, nehme ich an, dass Sie URL überprüfen müssen, und der beste Ansatz ist Regex. https://www.npmjs.com/package/url-regex

Answer 5

Um dies zu tun, würde ich stark erwägen, eine Komponente in einem TouchableOpacity zu verpacken. Wenn eine TouchableOpacity berührt wird, blendet sie (wird weniger undurchsichtig). Dies gibt dem Benutzer unmittelbares Feedback beim Berühren des Textes und sorgt für eine verbesserte Benutzererfahrung.

können Sie die onPress Eigenschaft auf dem TouchableOpacity benutzen Sie den Link passieren:

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