Wyświetl hiperłącze w aplikacji React Native App

Question

Jak wyświetlić hiperłącze w aplikacji React Native?

np.

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

Answer 1

coś takiego:

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

użyciu modułu Linking, który jest dostarczany wraz z React Native. (Należy pamiętać, że użycie Linking wymaga reakcji w języku macierzystym od 0,20.0 lub wyższym).

Answer 2

Wybrana odpowiedź dotyczy tylko iOS. Na obu platformach, można użyć następujący komponent:

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

Jeśli chcesz zrobić linki i inne rodzaje tekstu sformatowanego, bardziej kompleksowym rozwiązaniem jest użycie React Native HTMLView.

Answer 4

dla React Native, istnieje biblioteka do otwierania hiperłączy w aplikacji. https://www.npmjs.com/package/react-native-hyperlink

Poza tym, przypuszczam, że będziesz musiał sprawdzić adres URL i najlepszym podejściem jest Regex. https://www.npmjs.com/package/url-regex

Answer 5

Aby to zrobić, ja zdecydowanie rozważyć owijania komponent Text w TouchableOpacity. Po dotknięciu TouchableOpacity zanika (staje się mniej nieprzezroczysty). Daje to użytkownikowi natychmiastową informację zwrotną podczas dotykania tekstu i zapewnia lepsze wrażenia użytkownika.

Można użyć właściwości onPress na TouchableOpacity aby link zdarzyć:

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