Tepki Görüntüle Yerel Uygulamada Yanıtla

Question

Yerel Olarak Yanıtla uygulamasında bir köprüyü nasıl görüntülerim?

örn. Böyle

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

Answer 1

şey:

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

Yerli Tepki bir arada sunulan Linking modülü kullanarak. (Not: Linking'un kullanılması React Native 0.20.0 veya üstünü gerektirir.)

Answer 2

Seçilen yanıt yalnızca iOS ile ilgilidir. Her iki platformda, aşağıdaki bileşeni kullanabilirsiniz: bağlantıları ve zengin metin başka tür yapmak istiyorsanız

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

, daha kapsamlı bir çözüm React Native HTMLView kullanmaktır. React Native için

Answer 4

, Uygulamada Köprüleri açmak için bir kütüphane var. https://www.npmjs.com/package/react-native-hyperlink

Buna ek olarak, URL'yi kontrol etmeniz ve en iyi yaklaşımın Regex olduğunu varsaymanız gerekir. https://www.npmjs.com/package/url-regex

Answer 5

Bunu yapmak için TouchableOpacity numaralı telefona Text bileşenini sarmayı kesinlikle öneririm. TouchableOpacity'a dokunduğunda, kaybolur (daha az opak olur). Bu, metne dokunduğunuzda kullanıcılara anında geri bildirim sağlar ve daha iyi bir kullanıcı deneyimi sağlar.

Sen bağlantı gerçekleşmesi için TouchableOpacity üzerine onPress özelliğini kullanabilirsiniz:

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