[React Native] 리액트 네이티브 링크 Linking 사용방법

HTML의 <a href="URL"> 태그처럼

리액트 네이티브에서도 링크를 열 수 있는 기능이 있습니다.

Expo에서 제공하는 Linking 컴포넌트입니다.

 

앱에서 링크를 왜 열어?라고 생각하실 수도 있지만

같은 URL이라도 모바일에서 접속하면

앱으로 접속되게 만들어 놓은 기업들이

많기 때문에 유용합니다. 😀

 

---

📝 사용 방법

 

https://docs.expo.dev/versions/v46.0.0/sdk/linking/

Linking - Expo Documentation

✔ Expo 공식문서 입니다. 다양한 메서드가 존재합니다.

 

 

⦁ Install

npx expo install expo-linking

 

⦁ 예제 코드

import * as Linking from 'expo-linking';

...

const link = () => {
    Linking.openURL("https://web.joongna.com/product/detail/75760162")
}

return (
    <TouchableOpacity onPress={link}>
        <ImageBackground>
        ...
        </ImageBackground>
    </TouchableOpacity>
)

 

✔ Linking.openURL을 메서드를 사용해서 링크 이동을 할 수 있습니다.

 

✔ TouchableOpacity의 onPress에 메서드를 넣어줍니다.

    저는 이미지를 터치하면 링크로 이동하게 만들었습니다.

 

---

 

---

저는 프로젝트에서 당근 마켓, 더치트와 연결되는

링크를 사용했습니다.

 

공기계에 앱을 미리

설치해놓으니까 바로 앱으로 연결되는 게

정말 신기했습니다.

 

적은 수고, 높은 퍼포먼스 🎉

 

---

참고 문헌 :