[React-native] react-native-hyperlink 이용해서 웹 페이지 열기

안녕하세요.

오늘은 텍스트를 담은 변수 안에 웹 페이지 주소도 함께 담겨져 있는 경우, 해당 주소를 인식해서 클릭시 웹 페이지로 이동하는 기능을 만들어보겠습니다.

다음과 같은 상황을 예시로 들 수 있어요.

const contents = '안녕하세요. 제 개발 블로그의 주소는 https://velog.io/@blacksooooo입니다.'

해당 contents 변수를 Text Component 안에 넣기만 하면 주소 부분을 구별할 수 없습니다.

이 말은, 주소를 클릭해도 외부 웹 페이지로 연결할 수 없단 이야기에요.

하지만 우리는 다음과 같은 기능을 만들 수 있습니다.

이해를 돕기 위해 저희 앱의 사진을 가져왔습니다.
하단에 있는 글 내용은 모두 하나의 변수 안에 담겨 있는데 해당 링크를 클릭해서 이동할 수 있습니다.

---

react-native-hyperlink

해당 깃헙 링크에서 더 자세한 내용 확인 가능합니다.

https://github.com/obipawan/react-native-hyperlink

위 라이브러리를 이용하면 문장 안에 담긴 url을 파싱(구분)할 수 있습니다.
우선 라이브러리를 다운로드 받습니다.

npm i react-native-hyperlink

예시

import Hyperlink from 'react-native-hyperlink'

<Hyperlink>
	<Text>글 내용</Text>
</Hyperlink>

위처럼 Text Components를 Hyperlink Components로 감싼 형태로 이용하게 됩니다.

그럼 url을 어떻게 인식할 수 있을까요?

props

여러가지 props이 존재하지만 제가 이용했던 props은 linkStyle onPress 단 두가지 입니다.

✔️ linkStyle

파싱된 url의 스타일을 지정할 수 있는 props입니다.

✔️ onPress

파싱된 url을 클릭했을 때 처리를 할 수 있는 props입니다.

<Hyperlink 
	linkStyle={{fintSize: 8, color: '#505050'}}
    onPress={(url) => console.log(url)}
>
	<Text>글 내용 ~~~ https://velog.io/@blacksooooo</Text>
</Hyperlink>

---

웹 페이지 열기

그럼 이렇게 파싱해서 얻은 url로 무엇을 해야 할까요?

웹 페이지를 열어야 합니다.

이것은 별도의 라이브러리 없이 react-native의 Linking을 이용하면 가능합니다.

저는 따로 유틸함수로 아래와 같이 작성해서 이용을 했습니다.

• openUrl.js

import { Linking } from 'react-native';

export default function openURL(url) {
  Linking.openURL(url);
}

---

구현

react-native-hyperlink와 Linking을 이용해서 아래와 같이 구현할 수 있습니다.

import Hyperlink from 'react-native-hyperlink'
import { Text, StyleSheet } from 'react-native'
import openURL from 'lib/utils/openUrl';

export default function Example () {
	const contents = '안녕하세요. 제 개발 블로그의 주소는 https://velog.io/@blacksooooo입니다.'
    return (
    	<Hyperlink 
        	linkStyle={styles.hyperlinkStyle} 
            onPress={(url) => openURL(url)}
        >
        	<Text style={styles.contentStyle}>{contents}</Text>
        </Hyperlink>
    )
}

const styles=StyleSheet.create({
	hyperlinkStyle: {
    	fontSize: 16,
        color: '#505050'
    },
    contentStyle: {
    	fontSize: 18,
        color: '#111111'
    }
})

react-native-hyperlink와 Linking을 이용하여 url을 파싱해서 웹 페이지를 여는 방법에 대해 정리했습니다:)