React Native App에서 하이퍼 링크를 어떻게 표시합니까? 하이퍼 링크를 어떻게 표시합니까? 예 : <a

React Native 앱에서 하이퍼 링크를 어떻게 표시합니까?

예 : 

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

답변

이 같은:

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

LinkingReact 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. a 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>

딜러가 선택한 기능 또는 클래스 구성 요소 표기법을 사용할 수 있습니다.

답변

React Native Hyperlink (Native <A>태그) 사용 :

설치:

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>

답변

위의 응답에 추가 할 또 다른 유용한 참고 사항은 일부 flexbox 스타일을 추가하는 것입니다. 이렇게하면 텍스트가 한 줄로 유지되고 텍스트가 화면과 겹치지 않게됩니다.

 <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의 경우 App에서 Hyperlink를 여는 라이브러리가 있습니다.
https://www.npmjs.com/package/react-native-hyperlink

이 외에도 URL을 확인해야하며 최선의 접근 방식은 Regex입니다.
https://www.npmjs.com/package/url-regex