screenOptions로 헤더 꾸미기

react-router로 구조를 짜고 나면 자동으로 헤더에 name이 들어가 있고 기본적으로 흰색에 검은 글씨로 되어있다. 

이를 커스텀하기 위해  screenOption값을 넣어줄 수 있다. 

공통으로 처리하려면 Stack.Navigator에 일괄로 처리할 수 있고,

같은 navigator에 있는 screen들을 group으로 묶어서 따로 처리해 줄 수 도 있다. 

 

1. 공통으로 옵션 주기 

title을 옵션에 넣게 되면, HomeStack.Screen 안에 name  대신 HomeStack.Navigator 안의 title을 보여준다. 

스타일은 headerStyle 안에 작성해 주면 된다. 

<NavigationContainer>
    <HomeStack.Navigator
        screenOptions={{
            title: 'Fruits zone 🥝',
            headerStyle: {
                backgroundColor: 'lightgreen'
            }
        }}
    >
        <HomeStack.Screen name="Home" component={Home} />
        <HomeStack.Screen  name="ReviewDetails" component={ReviewDetails} />
    </HomeStack.Navigator>
</NavigationContainer>

적용된 Home 화면

적용된 ReviewDetails 화면

 

2. 페이지별로 각각 주기 

페이지별로 각각 커스텀을 하고 싶다면 Stack.Group을 사용하여 각각 묶을 수 있다. 

<NavigationContainer>
    <HomeStack.Navigator>
        <HomeStack.Group 
            screenOptions={{
                title: 'Fruits List 🥝',
                headerStyle: {
                    backgroundColor: 'lightgreen'
                }
            }}
        >
            <HomeStack.Screen name="Home" component={Home} />
        </HomeStack.Group>
        <HomeStack.Group
            screenOptions={{
                title: 'Fruits Details 🍌',
                headerStyle: {
                    backgroundColor: 'lightyellow'
                }
            }}
        >
            <HomeStack.Screen 
                name="ReviewDetails" 
                component={ReviewDetails} 

            />
        </HomeStack.Group>
    </HomeStack.Navigator>
</NavigationContainer>

 

적용된 Home 화면

적용된 ReviewDetails 화면

 

headerStyle에 높이도 적용할 수 있다.

글자색은 headerStyle에 들어가지 않고 따로 옵션으로 headerTintColor안에 넣는다. 

{...}
<HomeStack.Group
    screenOptions={{
        title: 'Fruits Details 🍌', // 페이지 이름
        headerTintColor: 'brown', // 텍스트 컬러
        headerStyle: {
            backgroundColor: 'lightyellow', // 배경색 
            height: 120, // 높이
            
        }
    }}
>
{...}