Linking 애러 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

Linking 애러

[왕초보] 나만의 수익성 앱, 앱개발 종합반

3주차

김*환

・

추천

・

조회수

답변 완료

[코드스니펫] DetailPage.js 붙여 넣기 후 애러가 납니다.

expo install expo-linking 터미널 실행
코드 붙여넣기

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 [tip, setTip] = useState({
        "idx":9,
        "category":"재테크",
        "title":"렌탈 서비스 금액 비교해보기",
        "image": "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png",
        "desc":"요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌탈 서비스를 이용하는 분들이 늘어나고 있는데요. 다만, 이런 렌탈 서비스 이용이 하나둘 늘어나다 보면 그 금액은 겉잡을 수 없이 불어나게 됩니다. 특히, 렌탈 서비스는 빌려주는 물건의 관리비용까지 포함된 것이기에 생각만큼 저렴하지 않습니다. 직접 관리하며 사용할 수 있는 물건이 있는지 살펴보고, 렌탈 서비스 항목에서 제외해보세요. 렌탈 비용과 구매 비용, 관리 비용을 여러모로 비교해보고 고민해보는 것이 좋습니다. ",
        "date":"2020.09.09"
    })
    
    useEffect(()=>{
        console.log(route)
        navigation.setOptions({
            title:route.params.title,
            headerStyle: {
                backgroundColor: '#000',
                shadowColor: "#000",
            },
            headerTintColor: "#fff",
        })
        setTip(route.params)
    },[])


    const popup = () => {
        Alert.alert("팝업!!")
    }


    const share = () => {
        Share.share({
            message:`${tip.title} \n\n ${tip.desc} \n\n ${tip.image}`,
        });
    }


    const link = () => {
        Linking.openURL("https://spartacodingclub.kr")
    }
    return ( 
        // ScrollView에서의 flex 숫자는 의미가 없습니다. 정확히 보여지는 화면을 몇등분 하지 않고
        // 화면에 넣은 컨텐츠를 모두 보여주려 스크롤 기능이 존재하기 때문입니다. 
        // 여기선 내부의 컨텐츠들 영역을 결정짓기 위해서 height 값과 margin,padding 값을 적절히 잘 이용해야 합니다. 
        <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>
    
    )
}


const styles = StyleSheet.create({
    container:{
        backgroundColor:"#000"
    },
    image:{
        height:400,
        margin:10,
        marginTop:40,
        borderRadius:20
    },
    textContainer:{
        padding:20,
        justifyContent:'center',
        alignItems:'center'
    },
    title: {
        fontSize:20,
        fontWeight:'700',
        color:"#eee"
    },
    desc:{
        marginTop:10,
        color:"#eee"
    },
    buttonGroup: {
        flexDirection:"row",
    },
    button:{
        width:90,
        marginTop:20,
        marginRight:10,
        marginLeft:10,
        padding:10,
        borderWidth:1,
        borderColor:'deeppink',
        borderRadius:7
    },
    buttonText:{
        color:'#fff',
        textAlign:'center'
    }
})

3.터미널

Unable to resolve module expo-linking from C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\pages\DetailPage.js: expo-linking could not be found within the project or in these directories:

node_modules

..\node_modules

1 | import React,{useState,useEffect} from 'react';

2 | import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,Share } from 'react-native';

> 3 | import * as Linking from 'expo-linking';

| ^

4 |

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

6 |

Error: Unable to resolve module expo-linking from C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\pages\DetailPage.js: expo-linking could not be found within the project or in these directories:

node_modules

..\node_modules

1 | import React,{useState,useEffect} from 'react';

2 | import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,Share } from 'react-native';

> 3 | import * as Linking from 'expo-linking';

| ^

4 |

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

6 |

at ModuleResolver.resolveDependency (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:158:15)

at DependencyGraph.resolveDependency (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)

at Object.resolve (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\lib\transformHelpers.js:129:24)

at resolve (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:33)

at C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\DeltaBundler\traverseDependencies.js:412:26

at Array.reduce (<anonymous>)

at resolveDependencies (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\DeltaBundler\traverseDependencies.js:411:33)

at processModule (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\DeltaBundler\traverseDependencies.js:140:31) at traverseDependenciesForSingleFile (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\DeltaBundler\traverseDependencies.js:131:3)

at traverseDependencies (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\DeltaBundler\traverseDependencies.js:60:7)

node_modules

..\node_modules

1 | import React,{useState,useEffect} from 'react';

2 | import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,Share } from 'react-native';

> 3 | import * as Linking from 'expo-linking';

| ^

4 |

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

6 |

at ModuleResolver.resolveDependency (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:158:15)

at DependencyGraph.resolveDependency (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\node-haste\DependencyGraph.js:231:43)

at Object.resolve (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\lib\transformHelpers.js:129:24)

at resolve (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\DeltaBundler\traverseDependencies.js:396:33)

at C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\DeltaBundler\traverseDependencies.js:412:26

at Array.reduce (<anonymous>)

at resolveDependencies (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\DeltaBundler\traverseDependencies.js:411:33)

at traverseDependencies (C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\node_modules\metro\src\DeltaBundler\traverseDependencies.js:60:7)

undefined Unable to resolve module expo-linking from C:\Users\hwan2\Desktop\sparta-study\sparta-myhoneytip-kim\pages\DetailPage.js: expo-linking could not be found within the project or in these directories:

node_modules

..\node_modules

1 | import React,{useState,useEffect} from 'react';

2 | import { StyleSheet, Text, View, Image, ScrollView,TouchableOpacity,Alert,Share } from 'react-native';

> 3 | import * as Linking from 'expo-linking';

| ^

4 |

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

6 |

at http://172.30.1.18:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:35915:25 in showCompileError

at http://172.30.1.18:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:35834:28 in <unknown>

at http://172.30.1.18:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&strict=false&minify=false:36350:34 in emit