* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
1.소개페이지 누르면 error 메세지가 나옴
AboutPage
import React,{useEffect} from 'react'
import {StyleSheet,View,Text,Image,TouchableOpacity} from 'react-native'
import { StatusBar } from 'expo-status-bar';
export default function AboutPage({navigation,route}){
const main = "https://storage.googleapis.com/sparta-image.appspot.com/lecture/about.png"
useEffect(()=>{
navigation.setOptions({
title:"소개 페이지",
headerStyle: {
backgroundColor: '#1F266A',
shadowColor: "#1F266A",
},
headerTintColor: '#fff',
})
},[])
return (<View style={styles.container}>
<StatusBar style="light" />
<Text style={styles.title}>HI! 스파르타코딩 앱개발반에 오신것을 환영합니다</Text>
<View style={styles.midContainer}>
<Image style={styles.midImage} source={{uri:main}} resizeMode={"cover"}/>
<Text style={styles.midText}>많은 내용을 간결하게 담아내려고 노력했습니다!</Text>
<Text style={styles.midText2}>꼭 완주 하셔서 꼭 여러분것으로 만들어가시길 바랍니다</Text>
<TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>여러분의 인스타계정</Text></TouchableOpacity>
</View>
</View>)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
backgroundColor: 'navy',
},
title: {
fontSize: 35,
color: "white",
fontWeight: '700',
marginTop:80,
marginLeft:20,
marginRight:20,
//textAlign:"justify"
},
midContainer: {
width:350,
height:550,
backgroundColor:"white",
marginTop:50,
borderRadius:40,
justifyContent:"center",
alignItems:"center"
},
midImage: {
width:200,
//컨텐츠의 높이 값
height:200,
//컨텐츠의 모서리 구부리기
borderRadius:50
},
midText: {
fontSize: 24,
fontWeight: '700',
marginTop:10,
marginLeft:20,
marginRight: 20,
textAlign: "center"
},
midText2: {
fontSize: 18,
fontWeight: '600',
marginTop:30,
marginLeft:20,
marginRight: 20,
textAlign: "center"
},
middleButton01: {
width:150,
height:50,
padding:15,
backgroundColor:"#fdc453",
borderColor:"deeppink",
borderRadius:15,
marginTop:30
},
middleButtonText: {
color:"#fff",
fontWeight:"700",
//텍스트의 현재 위치에서의 정렬
textAlign:"center"
}
});
StackNavigator
import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';
//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';
import AboutPage from '../pages/AboutPage';
import LikePage from '../pages/LikePage';
//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();
const StackNavigator = () =>{
return (
//컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
//위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
//Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "white",
borderBottomColor: "white",
shadowColor: "white",
height:100
},
//헤더의 텍스트를 왼쪾에 둘지 가운데에 둘지를 결정
headerTitleAlign:'left',
headerTintColor: "#000",
headerBackTitleVisible: false
}}
>
{/* 컴포넌트를 페이지로 만들어주는 엘리먼트에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
<Stack.Screen name="MainPage" component={MainPage}/>
<Stack.Screen name="DetailPage" component={DetailPage}/>
<Stack.Screen name="AboutPage" component={AboutPage}/>
<Stack.Screen name="LikePage" component={LikePage}/>
</Stack.Navigator>
)
}
export default StackNavigator;
