Як відображається гіперпосилання в додатку React Native?

Як відобразити гіперпосилання в додатку React Native?

напр

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

Щось на зразок цього:

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

використовуючи Linkingмодуль, який входить в комплект з React Native.

Вибрана відповідь стосується лише iOS. Для обох платформ можна використовувати наступний компонент:

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

Для цього я б настійно розглядав можливість обгортання Textкомпонента в TouchableOpacity. Коли аTouchableOpacity дотику до він згасає (стає менш непрозорим). Це дає користувачеві негайний зворотний зв’язок під час торкання тексту та забезпечує покращене користувацьке враження.

Ви можете скористатися onPressвластивістю на, TouchableOpacityщоб здійснити посилання:

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

Документація React Native пропонує використовувати Linking:

Довідково

Ось дуже основний випадок використання:

import { Linking } from 'react-native';

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

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

Ви можете використовувати або функціональні або класні позначення компонентів, вибір дилерів.

Використовуйте реактивну гіпернасилання (Native <A>tag):

Встановити:

npm i react-native-a

імпорт:

import A from 'react-native-a'

Використання:

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>

Ще одна корисна зауваження, яку слід додати до вищезазначених відповідей, - це додати деякий стиль флешбоксу. Це дозволить зберегти текст в одному рядку і переконається, що текст не перекриється екраном.

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

для React Native, у додатку є бібліотека для відкриття гіперпосилань. https://www.npmjs.com/package/react-native-hyperlink

На додаток до цього, я гадаю, вам потрібно буде перевірити URL-адресу, і найкращий підхід - це Regex. https://www.npmjs.com/package/url-regex

Якщо ви хочете робити посилання та інші види насиченого тексту, більш комплексним рішенням є використання React Native HTMLView .

Я просто подумав, що я поділюсь своїм хакі-рішенням із тим, хто зараз виявить цю проблему із вбудованими посиланнями в рядку. Він намагається вбудовувати посилання , динамічно надаючи їх тим, що коли-небудь рядок подається в нього.

Будь ласка, налаштовуйте його на свої потреби. Він працює для наших цілей як таких:

Це приклад того, як виглядатиме https://google.com .

Переглянути його на 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;
}

Імпорт зв'язування модуля з React Native

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

Спробуй це:-

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