¿Cómo se muestra un hipervínculo en la aplicación React Native?

¿Cómo muestro un hipervínculo en una aplicación React Native?

p.ej

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

Algo como esto:

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

usando el Linkingmódulo que se incluye con React Native.

La respuesta seleccionada se refiere solo a iOS. Para ambas plataformas, puede utilizar el siguiente componente:

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

Para hacer esto, consideraría encarecidamente envolver un Textcomponente en un archivo TouchableOpacity. Cuando TouchableOpacityse toca a, se desvanece (se vuelve menos opaco). Esto le da al usuario una respuesta inmediata al tocar el texto y proporciona una experiencia de usuario mejorada.

Puede usar la onPresspropiedad en el TouchableOpacitypara hacer que el enlace suceda:

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

La documentación de React Native sugiere usar Linking:

Referencia

Aquí hay un caso de uso muy básico:

import { Linking } from 'react-native';

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

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

Puede utilizar la notación de componentes funcionales o de clase, a elección del distribuidor.

Utilice React Native Hyperlink (nativo <A> etiqueta ):

Instalar en pc:

npm i react-native-a

importar:

import A from 'react-native-a'

Uso:

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>

Otra nota útil para agregar a las respuestas anteriores es agregar algunos estilos de flexbox. Esto mantendrá el texto en una línea y se asegurará de que el texto no se superponga a la pantalla.

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

para React Native, hay una biblioteca para abrir hipervínculos en la aplicación. https://www.npmjs.com/package/react-native-hyperlink

Además de esto, supongo que deberá verificar la URL y el mejor enfoque es Regex. https://www.npmjs.com/package/url-regex

Si desea crear enlaces y otros tipos de texto enriquecido, una solución más completa es usar React Native HTMLView .

Solo pensé en compartir mi solución hacky con cualquiera que esté descubriendo este problema ahora con enlaces incrustados dentro de una cadena. Intenta alinear los enlaces renderizándolos dinámicamente con cualquier cadena que se le introduzca.

Siéntase libre de ajustarlo a sus necesidades. Está funcionando para nuestros propósitos como tal:

Este es un ejemplo de cómo aparecería https://google.com .

Véalo en 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;
}

Importar Vincular el módulo desde React Native

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

Intentalo:-

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