¿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> utilizando el módulo de Linking que se incluye con React Native.
import { Linking } from '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 componente Text en TouchableOpacity . Cuando se toca un TouchableOpacity , 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 propiedad onPress en TouchableOpacity para hacer que el enlace suceda:
<TouchableOpacity onPress={() => Linking.openURL('http://google.com')}> <Text style={{color: 'blue'}}> Google </Text> </TouchableOpacity>