React-Native [8. 공유하기, 링크]
10759 단어 react nativeSharelinkShare
공유하기
예시 코드
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";
- 기존 "react-native" 라이브러리에서 Share 기능을 추가로 import
- 공유 기능을 실행시킬때 작동할 Share 기능을 작성한다.
- 예시에서는 Share.share 함수에 message를 작성하였다.
- 화살표함수로 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';
- expo-linking을 설치한다.
- "expo-linking" 라이브러리에서 *(전부)를 Linking으로 선언한다.
- 링크 기능을 실행시킬때 작동할 Link 기능을 작성한다.
예시에서는 Linking.openURL 함수로 스파르타코딩 사이트를 접속하도록 작성했다. - 화살표함수로 link() 함수를 실행시킨다.
Author And Source
이 문제에 관하여(React-Native [8. 공유하기, 링크]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minbrother/React-Native-8.-공유하기-링크저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)