Показать гиперссылку в React Native App

Question

Как отобразить гиперссылку в приложении React Native?

например.

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

Answer 1

Что-то вроде этого:

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

используя Linking модуль, который поставляется вместе с React Native. (Обратите внимание, что для использования Linking требуется React Native 0.20.0 или выше.)

Answer 2

Выбранный ответ относится только к 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' 
    } 
}); 

Answer 3

Если вы хотите сделать ссылки и другие типы форматированного текста, более комплексное решение заключается в использовании React Native HTMLView.

Answer 4

для React Native, есть библиотека для открытия гиперссылок в приложении.

В дополнение к этому, я полагаю, вам нужно будет проверить URL-адрес, и лучшим подходом является Regex. https://www.npmjs.com/package/url-regex

Answer 5

Чтобы сделать это, я бы сильно подумал об упаковке компонента Text в TouchableOpacity. Когда прикасается TouchableOpacity, он исчезает (становится менее непрозрачным). Это дает пользователю немедленную обратную связь при касании текста и обеспечивает улучшенный пользовательский интерфейс.

Вы можете использовать onPress свойство на TouchableOpacity сделать ссылку случиться:

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