Comment afficher un lien hypertexte dans l'application React Native?

Comment afficher un lien hypertexte dans une application React Native?

par exemple

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

Quelque chose comme ça:

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

en utilisant le Linkingmodule fourni avec React Native.

La réponse sélectionnée 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, j'envisagerais fortement d'encapsuler un Textcomposant dans un fichier TouchableOpacity. Quand a TouchableOpacityest touché, il s'estompe (devient moins opaque). Cela donne à l'utilisateur une rétroaction immédiate lorsqu'il touche le texte et fournit une expérience utilisateur améliorée.

Vous pouvez utiliser la onPresspropriété sur le TouchableOpacitypour créer le lien:

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

La documentation React Native suggère d'utiliser Linking:

Référence

Voici un cas d'utilisation très basique:

import { Linking } from 'react-native';

const url="https://google.com"

<Text onPress={() => Linking.openURL(url)}>
    {url}
</Text>

Vous pouvez utiliser la notation des composants fonctionnels ou de classe, au choix des concessionnaires.

Utilisez React Native Hyperlink ( <A>balise native ):

Installer:

npm i react-native-a

importer:

import A from 'react-native-a'

Usage:

1. <A>Example.com</A>
2. <A href="example.com">Example</A>
3. <A href="https://example.com">Example</A>
4. <A href="example.com" style={{fontWeight: 'bold'}}>Example</A>

Une autre note utile à ajouter aux réponses ci-dessus est d'ajouter un style de flexbox. Cela gardera le texte sur une seule ligne et garantira que le texte ne chevauche pas l'écran.

 <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>

pour le React Native, il existe une bibliothèque pour ouvrir des hyperliens dans l'application. https://www.npmjs.com/package/react-native-hyperlink

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

Si vous souhaitez créer des liens et d'autres types de texte enrichi, une solution plus complète consiste à utiliser React Native HTMLView .

Je pensais juste que je partagerais ma solution hacky avec tous ceux qui découvrent ce problème maintenant avec des liens intégrés dans une chaîne. Il tente d' insérer les liens en les rendant dynamiquement avec la chaîne qui y est introduite.

N'hésitez pas à l'adapter à vos besoins. Cela fonctionne pour nos objectifs en tant que tels:

Ceci est un exemple de la façon dont https://google.com apparaîtrait.

Visualisez-le sur 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;
}

Importer la liaison du module depuis React Native

import { TouchableOpacity, Linking } from "react-native";

Essayez-le: -

<TouchableOpacity onPress={() => Linking.openURL('http://Facebook.com')}>
     <Text> Facebook </Text>     
</TouchableOpacity>