Javascript/React-Native

[RN] 앱내에서 외부로 링크 열기

insub4067 2022. 7. 31. 13:46
expo install expo-linking
// 1. import
import * as Linking from 'expo-linking';

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

	// 2. 연결할 link 정의
    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>
                    // 3. event 랑 link 함수 연결
                    <TouchableOpacity style={styles.button} onPress={()=>link()}><Text style={styles.buttonText}>외부 링크</Text></TouchableOpacity>
                </View>
                
            </View>
            
        </ScrollView>
    
    )
}