React Native Share와 Expo_Linking 활용해서 공유, 외부링크 기능 구현하기

 

이전 포스팅이였던  스택 네비게이션도 한번 확인 해보세요~

 

2022.07.04 - [Mobile/React Native] - React Native_스택 네비게이션 활용 페이지와 컴포넌트 이동

React Native_스택 네비게이션 활용 페이지와 컴포넌트 이동

 

 

앱 공유하기 기능 - Share

 

유튜브나 블로그 글 같은 것을 보다 보면 공유하기 버튼을 클릭해서

앱들 간의 다른 사람들과 공유하는 기능을 보실 수 있었을 것입니다.

 

react-native의 Share함수를 사용하면 간편하게 기능을 구현할 수 있습니다

 

 

import { Share } from "react-native"

 

위와 같이 import를 해서 사용합니다

 

Share.share({ message: '내용' });

 

 

share 함수를 사용하면 우리가 흔히 볼 수 있는 공유 창이 나타나고 내용들이 메세지로 전달됩니다.

 

 

import React from 'react';
import { TouchableOpacity,Share } from 'react-native';


export default function DetailPage({navigation,route}) {	
    const share = () => {
        Share.share({
            message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,
        });
    }
    
    return (
      <TouchableOpacity style={styles.button} onPress={()=>share()}>
        <Text style={styles.buttonText}>
          공유하기
        </Text>
      </TouchableOpacity>
    )
}

 

TouchableOpactiy 컴포넌트에 onPress속성에 share함수만 넣어서 실행하면됩니다.

 그때 실행할 때 인자값으로 공유할 내용을 같이 전달하면 기능 구현은 끝입니다.

 

 

아래와 같이 공유 기능이 노출됩니다

 

공유하기 버튼클릭시 이미지

 

반응형

 

 

공유 전달된 이미지

 

이미지도 지금은 글자로 들어가지만 

<img> 태그를 사용하면 문자로 보낼 경우 이미지를 노출시킬수도 있습니다

 

 

---

 

앱 외부링크 이동 기능 - Linking 

 

앱에서 외부링크를 여는 방법은 Expo에 제공해주는 라이브러리를 설치하여 

Linking의 openURL 함수를 사용하여 기능 구현을 합니다

 

import React from 'react';
import { TouchableOpacity,Share } from 'react-native';


export default function DetailPage({navigation,route}) {	
    const link = () => {
        Linking.openURL("https://spartacodingclub.kr")
    }
    
    return (
       <TouchableOpacity style={styles.button} onPress={()=>link()}>
         <Text style={styles.buttonText}>
           외부 링크
         </Text>
       </TouchableOpacity>
    )
}

 

정말 위의 코드만 보면 정말 간단하죠?

 

코드를 작성하면서 저 또한  앱에 대한 기능 공부를 복습하게되었습니다

저도 저만의 앱을 만들려고 앱을 공부하고 있습니다

 

아직까지 모험은 끝나지 않았으니까요!!

오늘도 한 발자국 나아갑시다!!

화이팅!!