🤓 What I Learned Today

React Navigation

이렇게 Navigation 을 만들어주었다만… 헤더에 제목이 기본값으로 들어가 있어서 그런지 매우 거슬렸다. 찾아보니 이 부분도 설정을 따로 해주면 된다고 하여 찾아보았다.

---

🤔 Code Snippets

헤더를 숨기고 싶으면..!

<Stack.Screen name="Home" component={Home} options={{headerShown: false}}/>

옵션을 넣어주면 된다.

---

🚀 Challenges Experienced

라이브러리가 있어 기본 설정만 바꿔주면 되는 부분이라 생각보다 간단하였다.
이 외에 다양한 설정이 있었는데…

헤더에 제목만 변경해 주려면

<Stack.Screen name="Home" component={Home} options={{title: "홈"}}/>

이렇게 해주면 된다. 그러면 스타일도 변경하고 싶다면?

<Stack.Screen 
	name="Home" 
	component={Home} 
	options={{
		title: "홈" , 
		headerStyle: {
			backgroundColor: "#ffffff"
		},
		headerTintColor: "#ffffff",
		headerTitleStyle: {
			fontWeight:'bold',
			fontSize: 20,
		},
	}}
/>

그 외…

화면 컴포넌트에서 navigation.setOptions 함수를 이용해도 된다고 한다.

function Home({navigation}) {
	useEffect(() => {
		navigation.setOption({title:'홈'})
},[navigation]);
}

음… 여기에서 헤더의 제목만 숨기고 뒤로가기는 만들어 주고 싶다면?(iOS)

버튼으로 뒤로가기를 만들어 주는 방법도 있다.

<Button onPress={() => navigation.pop()} title="뒤로가기" />

(iOS) 에서 이렇게 했다가는 StatusBar 영역을 침범… 컴포넌트 이용해서 이렇게 고쳐준다.

import {SafeAreaView} from 'react-native-safe-area-context'

<SafeAreaView>
	<Button onPress={() => navigation.pop()} title="뒤로가기" />
</SafeAreaView>