Wie zeigt man einen Hyperlink in der React Native App an?

109

Wie zeige ich einen Hyperlink in einer React Native-App an?

z.B

<a href="https://google.com>Google</a> 
Will Chu
quelle
2
Fügen Sie weitere Tags wie "Javascript" hinzu, um mehr Aufmerksamkeit von den Benutzern zu erhalten. Aber verallgemeinern Sie Ihre Beiträge nicht zu stark, indem Sie Tags wie "Codierung" usw. hinzufügen
Matt C
@MattC Ich würde argumentieren, dass das Hinzufügen von 'Javascript' zu allgemein ist.
Ryanwebjackson

Antworten:

232

Etwas wie das:

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

Verwenden des LinkingModuls, das im Lieferumfang von React Native enthalten ist.

Philipp von Weitershausen
quelle
1
Wenn Sie einen dynamischen Wert benötigen, können Sie etwas this.props.urlanstelle von 'http://google.com'(keine Klammern erforderlich)
Elon Zito
@philipp es wirft mich Fehler m 'Variable kann nicht gefunden werden Linking'
Devansh sadhotra
2
@devanshsadhotra hast du import { Linking } from 'react-native';in deinem Dokument?
Eric Phillips
2
Sie können auch <Text> -Elemente einbetten, so dass der verknüpfte Text ein Teil des übergeordneten Textes sein kann:<Text>Some paragraph <Text onPress=...>with a link</Text> inside</Text>
pstanton
4
LinkingIOS wurde abgeschrieben. Verwenden Sie Linking.
Jasonleonhard
26

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'
  }
});
Kuf
quelle
3
Die ausgewählte Antwort hat in Android (RN 35) gut funktioniert.
Pedram
2
@ JacobLauritzen Nun, es ist das gleiche, nachdem jemand meine Antwort kopiert hat: / stackoverflow.com/posts/30540502/revisions
Kuf
21

Zu diesem Zweck würde ich dringend in Betracht ziehen, eine TextKomponente in a zu verpacken TouchableOpacity. Wenn a TouchableOpacityberührt wird, verblasst es (wird weniger undurchsichtig). Dies gibt dem Benutzer sofortiges Feedback beim Berühren des Textes und sorgt für eine verbesserte Benutzererfahrung.

Sie können die onPressEigenschaft auf dem verwenden TouchableOpacity, um den Link zu erstellen:

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

React Native-Dokumentation schlägt vor, Folgendes zu verwenden Linking:

Referenz

Hier ist ein sehr grundlegender Anwendungsfall:

import { Linking } from 'react-native';

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

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

Sie können entweder die Funktions- oder die Klassenkomponenten-Notation verwenden, je nach Wahl des Händlers.

jasonleonhard
quelle
LinkingIOS wurde abgeschrieben. Verwenden Sie Linking.
Jasonleonhard
4

Verwenden Sie React Native Hyperlink (Native <A>Tag):

Installieren:

npm i react-native-a

importieren:

import A from 'react-native-a'

Verwendung:

  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>
Khalil Laleh
quelle
3

Ein weiterer hilfreicher Hinweis zu den obigen Antworten ist das Hinzufügen eines Flexbox-Stils. Dadurch bleibt der Text in einer Zeile und es wird sichergestellt, dass der Text den Bildschirm nicht überlappt.

 <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>
Stephanieraymos
quelle
1

Wenn Sie Links und andere Arten von Rich Text erstellen möchten, ist die Verwendung von React Native HTMLView eine umfassendere Lösung .

Eliot
quelle
1
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - Von der Überprüfung
Ari0nhh
@ Ari0nhh Ich habe die Frage nicht gelöscht, da ich nur so auf Ihren Kommentar antworten konnte. Es gibt viele Präzedenzfälle auf SO, bei denen eine hochrangige Antwort einfach ein Link zu einer guten Bibliothek ist. Weitere Antworten beziehen sich bereits auf eine einfache Implementierung. Ich nehme an, ich könnte dies als Kommentar zur ursprünglichen Frage erneut veröffentlichen, aber ich sehe es als echte Antwort. Und das Verlassen des Links hier ist zumindest ein Krümel für zukünftige Suchende, wenn die Leute ihn bearbeiten und mit besseren Beispielen verbessern möchten, gibt es zumindest jetzt einen Ausgangspunkt.
Eliot
1

Ich dachte nur, ich würde meine hackige Lösung mit jedem teilen, der dieses Problem jetzt entdeckt eingebetteten Links in einer Zeichenfolge entdeckt. Es wird versucht, die Links zu inline indem es dynamisch mit der jeweils eingegebenen Zeichenfolge gerendert wird.

Bitte zögern Sie nicht, es an Ihre Bedürfnisse anzupassen. Es funktioniert für unsere Zwecke als solche:

Dies ist ein Beispiel dafür, wie https://google.com angezeigt wird.

Sehen Sie es auf 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;
}
Freundlicher Roboter
quelle
1

Import Verknüpfen des Moduls mit React Native

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

Versuch es:-

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