Afficher l'hyperlien dans L'application React Native

la réponse choisie se réfère uniquement à iOS. Pour les deux plates-formes, vous pouvez utiliser le composant suivant:

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'
  }
});

pour ce faire, je considérerais fortement d'emballer un Text composant TouchableOpacity. Lorsqu'un TouchableOpacity est touché, il s'efface (devient moins opaque). Cela permet à l'utilisateur de réagir immédiatement lorsqu'il touche le texte et améliore l'expérience de l'utilisateur.

Vous pouvez utiliser le onPress propriété sur l' TouchableOpacity pour faire le lien arriver:

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

Si vous voulez faire des liens et d'autres types de texte riche, une solution plus complète est d'utiliser React Native HTMLView.

pour le natif React, il y a une bibliothèque pour ouvrir les hyperliens dans App. https://www.npmjs.com/package/react-native-hyperlink

en plus de cela, je suppose que vous aurez besoin de vérifier l'url et la meilleure approche est Regex. https://www.npmjs.com/package/url-regex