* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
어제 튜터님께서 navigation을 굳이 props로 받아온 이유가 있냐고 하셨었는데 props로 받아올때 사용이 안된다면 어떤 부분에 오류가 있을 수 있나요?
제 코드에서는 어떤 오류가 있나요?
TypeError: Cannot read property 'navigate' of undefined, js engine: hermes
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요
import { useState, useEffect, } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView, Image, TouchableOpacity, Alert, TextInput, } from 'react-native';
import Loading from '../Components/Roading';
import Profilecard from '../Components/Profilecard';
import data from '../data.json';
const It = '/Users/ts_4187/Desktop/java study/project-TS_4187/Image/it.jpeg'
const Search = '/Users/ts_4187/Desktop/java study/project-TS_4187/Image/search01.png'
export default function MainPage({navigation, route}) {
let profile = data.profiledata
const [ready, setReady] = useState(true)
const [input, setInput] = useState('');
useEffect(()=>{
setTimeout(()=>{
navigation.setOptions({
title: '커넥팅'
})
setReady(false)
},3000)
})
return ready ? <Loading/> :(
<View style={styles.container}>
<StatusBar style="auto"/>
<Image style={styles.mainimage} source={require(It)}/>
<View style={styles.titlecontainer}>
<TextInput
style={styles.searchbar}
onChangeText={setInput}
value={input}
placeholder="검색하세요.">
</TextInput>
<TouchableOpacity style={styles.searchbutton}>
<Image style={styles.buttonimage} source={require(Search)} resizeMode='cover'/>
</TouchableOpacity>
</View>
<ScrollView style={styles.profilecontainer}>
{
profile.map((content, i)=>{
return(<Profilecard content={content} key={i}/>)
}
)}
</ScrollView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1 ,
backgroundColor: '#ffffff',
},
titlecontainer: {
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row'
},
searchbutton: {
alignSelf: 'flex-end',
marginTop: 5,
},
buttonimage: {
width: 50,
height: 50,
borderRadius: 10,
overflow: 'hidden',
},
mainimage: {
width: '100%',
height: 110,
},
searchbar: {
width: '77%',
height: 40,
marginTop: 5,
marginRight: 10,
borderWidth: 1,
padding: 10,
borderRadius: 10,
},
profilecontainer: {
marginTop: 10,
marginLeft: 10,
}
});
import { useState, useEffect, } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView, Image, TouchableOpacity, Alert, } from 'react-native';
export default function ProfilePage ({navigation, route}) {
const [profile, setprofile] = useState({
"idx": 0,
"catagory": "앱 개발",
"image": "/Users/ts_4187/Desktop/java study/project-TS_4187/Image/it.jpeg",
"title": "예시입니다.",
"desc": "예시입니다. 예시입니다. 예시입니다. 예시입니다."
})
useEffect(()=>{
console.log(route)
navigation.setOptions({
title:'profile'
})
})
return(
<ScrollView style={styles.container}>
<Text style={styles.main}>
안녕
</Text>
</ScrollView>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#fff'
}
})
import React from "react";
import { SafeAreaView, View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";
export default function Profilecard({content, navigation}) {
return(
<TouchableOpacity style={styles.container} onPress={()=>{navigation.navigate('ProfilePage')}}>
<Image style={styles.myimage} source={{uri:content.Image}}/>
<View style={styles.titlecontainer}>
<Text style={styles.title}>
{content.title}
</Text>
<Text style={styles.desc}>
{content.desc}
</Text>
</View>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
margin:3,
borderBottomWidth:0.5,
borderBottomColor:"skyblue",
borderRadius: 12,
},
myimage: {
flex: 1,
width: 100,
height: 100,
borderRadius: 10,
},
titlecontainer: {
flex: 2,
flexDirection: 'column',
marginLeft: 10,
},
title: {
flex: 1,
fontSize: 25,
fontWeight: '700',
height: 30,
},
desc: {
flex: 3,
fontSize: 17,
fontWeight: '500',
marginTop: 5,
},
})
