React-Native [8. 공유하기, 링크]

공유하기

예시 코드

Detail.js

import React,{useState,useEffect} from 'react';
import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,Share } from 'react-native';

.
.
.

    const share = () => {
        Share.share({
            message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,
        });
    }
    return ( 
        <ScrollView style={styles.container}>
            <Image style={styles.image} source={{uri:tip.image}}/>
            <View style={styles.textContainer}>
                <Text style={styles.title}>{tip.title}</Text>
                <Text style={styles.desc}>{tip.desc}</Text>
                <View style={styles.buttonGroup}>
                    <TouchableOpacity style={styles.button} onPress={()=>popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>
                    <TouchableOpacity style={styles.button} onPress={()=>share()}><Text style={styles.buttonText}>팁 공유하기</Text></TouchableOpacity>
                </View>
            </View>
        </ScrollView>
    )
}

.
.
.

사용법

import { Share } from "react-native";

1. 기존 "react-native" 라이브러리에서 Share 기능을 추가로 import
2. 공유 기능을 실행시킬때 작동할 Share 기능을 작성한다.
   • 예시에서는 Share.share 함수에 message를 작성하였다.
3. 화살표함수로 share() 함수를 실행시킨다.

링크

설치코드

expo install expo-linking

예시코드

Detail.js

import React,{useState,useEffect} from 'react';
import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,Share } from 'react-native';
import * as Linking from 'expo-linking';

export default function DetailPage({navigation,route}) {

.
.
.

    const link = () => {
        Linking.openURL("https://spartacodingclub.kr")
    }
    return (
        <ScrollView style={styles.container}>
            <Image style={styles.image} source={{uri:tip.image}}/>
            <View style={styles.textContainer}>
                <Text style={styles.title}>{tip.title}</Text>
                <Text style={styles.desc}>{tip.desc}</Text>
                <View style={styles.buttonGroup}>
                    <TouchableOpacity style={styles.button} onPress={()=>popup()}><Text style={styles.buttonText}>팁 찜하기</Text></TouchableOpacity>
                    <TouchableOpacity style={styles.button} onPress={()=>share()}><Text style={styles.buttonText}>팁 공유하기</Text></TouchableOpacity>
                    <TouchableOpacity style={styles.button} onPress={()=>link()}><Text style={styles.buttonText}>외부 링크</Text></TouchableOpacity>
                </View>
                
            </View>
            
        </ScrollView>
    
    )
}

.
.
.

사용법

import * as Linking from 'expo-linking';

1. expo-linking을 설치한다.
2. "expo-linking" 라이브러리에서 *(전부)를 Linking으로 선언한다.
3. 링크 기능을 실행시킬때 작동할 Link 기능을 작성한다.
   예시에서는 Linking.openURL 함수로 스파르타코딩 사이트를 접속하도록 작성했다.
4. 화살표함수로 link() 함수를 실행시킨다.