Bagaimana Cara Menampilkan Hyperlink di Aplikasi React Native?

Bagaimana cara menampilkan hyperlink di aplikasi React Native?

misalnya

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

Sesuatu seperti ini:

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

menggunakan Linkingmodul yang dibundel dengan React Native.

Jawaban yang dipilih hanya mengacu pada iOS. Untuk kedua platform, Anda dapat menggunakan komponen berikut:

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

Untuk melakukan ini, saya akan sangat mempertimbangkan untuk membungkus Textkomponen dalam file TouchableOpacity. Saat a TouchableOpacitydisentuh, warnanya memudar (menjadi kurang buram). Ini memberi pengguna umpan balik langsung saat menyentuh teks dan memberikan pengalaman pengguna yang lebih baik.

Anda dapat menggunakan onPressproperti di TouchableOpacityuntuk membuat link terjadi:

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

Dokumentasi React Native menyarankan penggunaan Linking:

Referensi

Berikut adalah kasus penggunaan yang sangat mendasar:

import { Linking } from 'react-native';

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

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

Anda dapat menggunakan notasi komponen fungsional atau kelas, pilihan dealer.

Gunakan React Native Hyperlink ( <A>Tag asli ):

Install:

npm i react-native-a

impor:

import A from 'react-native-a'

Pemakaian:

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>

Catatan lain yang berguna untuk ditambahkan ke tanggapan di atas adalah menambahkan beberapa gaya flexbox. Ini akan membuat teks tetap pada satu baris dan akan memastikan teks tidak tumpang tindih dengan layar.

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

untuk React Native, ada library untuk membuka Hyperlink di App. https://www.npmjs.com/package/react-native-hyperlink

Selain itu, saya rasa Anda perlu memeriksa url dan pendekatan terbaik adalah Regex. https://www.npmjs.com/package/url-regex

Jika Anda ingin membuat tautan dan jenis teks kaya lainnya, solusi yang lebih komprehensif adalah menggunakan React Native HTMLView .

Hanya berpikir saya akan membagikan solusi hacky saya dengan siapa saja yang menemukan masalah ini sekarang dengan tautan yang disematkan dalam string. Ini mencoba untuk menyebariskan tautan dengan merendernya secara dinamis dengan string apa pun yang dimasukkan ke dalamnya.

Jangan ragu untuk menyesuaikannya dengan kebutuhan Anda. Ini berfungsi untuk tujuan kami seperti:

Ini adalah contoh bagaimana https://google.com akan muncul.

Lihat di 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 Linking modul dari React Native

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

Cobalah:-

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