web-dev-qa-db-fra.com

Afficher le lien hypertexte dans React Native App

Comment afficher un lien hypertexte dans une application React Native? 

par exemple. 

<a href="https://google.com>Google</a>
react-native
53
Will Chu

Quelque chose comme ça:

IOS: 

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

en utilisant le module LinkingIOS fourni avec React Native.

Android: 

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

en utilisant le module Linking fourni avec React Native.

118
Philipp von Weitershausen

La réponse sélectionnée fait uniquement référence à 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'
  }
});
14
Kuf

Pour ce faire, j’aimerais envisager fortement d’envelopper un composant Text dans une TouchableOpacity. Quand une TouchableOpacity est touchée, elle s'estompe (devient moins opaque). Cela donne à l'utilisateur un retour immédiat lorsqu'il touche le texte et améliore l'expérience utilisateur.

Vous pouvez utiliser la propriété onPress sur la TouchableOpacity pour que le lien se produise: 

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

pour React Native, il existe une bibliothèque pour ouvrir des hyperliens dans l'App . 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

1
rajaishwary

Utilisez un hyperlien réactif natif (Native <A> tag):

Installer:
npm i react-native-a

importation:

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>

0
Khalil Laleh

Je pensais que je partagerais ma solution avec tous ceux qui découvrent ce problème maintenant avec liens incorporés dans une chaîne. Il tente de inline les liens en le rendant dynamiquement avec la chaîne qui y est introduite.

S'il vous plaît n'hésitez pas à Tweak le à vos besoins. Cela fonctionne pour nos objectifs en tant que tel:

Voici un exemple de la manière dont https://google.com apparaîtrait.

Voir 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;
}
0
Friendly-Robot

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

0
Eliot

La documentation native de React 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 fonctionnelle ou par composant, choix du concessionnaire.

0
jasonleonhard