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

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

z.B

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

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.

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

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>

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.

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>

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>

Für den React Native gibt es eine Bibliothek zum Öffnen von Hyperlinks in der App. https://www.npmjs.com/package/react-native-hyperlink

Darüber hinaus müssen Sie wahrscheinlich die URL überprüfen und der beste Ansatz ist Regex. https://www.npmjs.com/package/url-regex

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

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

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>