페이지 헤더 스타일 수정
StackNavigator.js 코드 예시
import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';
//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';
//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
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.Navigator>
)
}
export default StackNavigator;
--> 헤더 변경 코드 부분
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "white",
borderBottomColor: "white",
shadowColor: "white",
height:100
},
//헤더의 텍스트를 왼쪾에 둘지 가운데에 둘지를 결정
headerTitleAlign:'left',
headerTintColor: "#000",
headerBackTitleVisible: false
}}
>
--> headerStyle 부분이 헤더의 배경 부분
--> 그 아래 headerTitleAlign, headerTintColor, headerBackTitleVisible 부분이 헤더의 글자 부분]
페이지 이동
<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.Navigator>
Stack.Navigator 태그 안에 Stack.Screen태그에 두개의 컴포넌트가 등록되어 있음
--> 두 개의 컴포넌트를 import하여 가져옴
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';
<Stack.Screen name="MainPage" component={MainPage}/>
<Stack.Screen name="DetailPage" component={DetailPage}/>
--> Stack.Screen태그의 name속성은 해당 컴포넌트로 이동할 때 쓰기위해 해당 컴포넌트에게 붙여주는 이름이다.
--> Stack.Screen태그의 component 속성은 Stack.Screen태그를 통해 등록할 컴포넌트이다.(위에서 미리 import)Stack.Screen 태그에 등록된 컴포넌트들은 navigation과 route 딕셔너리를 속성으로 넘겨받아 사용할 수 있음
navigation --> 해당 임포넌트에서 다른 임포넌트로 이동할 때 사용
route --> 다른 임포넌트에서 해당 임포넌트로 이동할 때 보내온 데이터가 있으면 그 데이터를 받는데 사용
navigation 객체
navigation 객체가 가지고 있는 두 함수(setOptions와 navigate)
예) 해당 페이지의 제목을 설정할 수 있음( navigation.setOptions() )
해당 컴포넌트로 이동했을 때 헤더에 나타날 글자를 변경할 수 있음 navigation.setOptions({ title:'나만의 꿀팁' })
Stack.screen에서 name 속성으로 정해준 이름을 지정해주면 해당 페이지로 이동하는 함수( navigation.navigate() )
navigation.navigate("DetailPage")
--> "DetailPage"는 Stack.Screen에 컴포넌트를 등록할 떼 name속성으로 정해준 이름
--> name 속성으로 정해준 이름을 통해 해당 컴포넌트로 이동 가능함name 속성을 전달해주고, 두 번째 인자로 딕셔너리 데이터를 전달해주면, Detail 페이지에서 두번째 인자로 전달된 딕셔너리 데이터를 route 딕셔너리로 로 받을 수 있음
navigation.navigate("DetailPage",{ title: title })
--> navigate함수를 통해 "DetailPage" 컴포넌트로 이동하면서 딕셔너리형태로 데이터를 전달하고 있음전달받은 데이터를 받는 route 딕셔너리
--> navigate 함수로 전달되는 딕셔너리 데이터는 다음과 같은 모습이다.
{
route : {
params :{
title:title
}
}
}비구조 할당 방식으로 route에 params 객체 키로 연결되어 전달되는 데이터를 꺼내 사용
const { title} = route.params;
--> route딕셔너리의 params키에 엮인 값인 title 딕셔너리를 가져옴
--> 가져온 데이터(title딕셔너리)의 키가 title이며 이를 담는 변수 또한 title로 동일한 이름
--> 비구조 할당 방식으로 자동으로 title변수에 title딕셔너리의 값이 담기게 됨
ㅎㅎ