React Navigation4. header bar 설정

목차

1. 헤더 타이틀 설정
2. 타이틀에 params 사용
3. options 업데이트
4. 헤더 스타일 적용
5. 공통 options 공유

 

---

 

 

1. 헤더 타이틀 설정

• 스크린 컴포넌트에서는 객체 또는 객체를 반환하는 함수 인 options 프롭을 사용할 수 있다.

 

1-1. 객체 반환 시

<Stack.Screen
	name="home"
    component={HomeScreen}
    options={{ title: 'My home' }}
/>

 

1-2. 함수 반환 시

<Stack.Screen
	name="Rrofile"
    component={ProfileScreen}
    options={ (route) => { title: route.params.name} }
/>

 

options가 함수일 경우, 전달된 인자는 다음의 두가지 속성을 가진 객체이다

• navigation: 스크린에 대한 네비게이션 옵션
• route: 스크린에 대한 라우터 옵션

 

 

 

2. 타이틀에 params 사용하기

• 타이틀에 파람스를 사용하기 위해서는 configuration 객체를 반환하는 함수 인 options 프롭을 만들어야 한다.
• 컴포넌트가 렌더되기 이전에 정의되기 때문에 this.props 사용 불가능 하다.

(this는 어떤 컴포넌트의 인스턴스도 특정할 수 없기 때문에 프롭스 사용 불가능함)

 

 

 

3. options 업데이트 하기

 

<Button
	title="Update the title"
    onPress={ () => navigation.setOptions({ title: 'Updated' }) }
/>

 

 

4. 헤더 스타일 적용하기

• headerStyle: 헤더를 감싸는 view에 적용될 스타일 객체
• headerTintColor: 뒤로가기 버튼과 타이틀에 대한 색깔 설정
• headerTitleStyle: 타이틀에 대한 폰트, 폰트 굵기 등을 설정

 

<Stack.Screen
	name="home"
    component={HomeScreen}
    options={{
    	title: 'My home',
        headerStyle:{
        	backgroundColor: '#f4511e'
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
        	fontWeight: 'bold',
        }
    }}
/>

 

5. 여러 화면들에 공통으로 적용될 options 설정

<Stack.Navigator
	screenOptions ={{	//screenOptions 속성을 통해 options 공유 가능
    	headerStyle: {
        	backgroundColor: '#f4511e
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
        	fontWeight: 'bold
        },
    }}
>
	<Stack.Screen
    	name="Home"
        component={HomeScreen}
    />
</Stack.Navigator>