디자인에 따라 react native navigation에서 기본 header style을 customizing할 필요가 생겼다.
Stack.Screen의 options를 다음과 같이 바꿔준다.
const AuthNavigation: FC = () => {
return (
<AuthStack.Navigator
headerMode="screen"
initialRouteName="Login"
screenOptions={{
headerStyle: {
elevation: 0,
shadowOpacity: 0,
},
cardStyle: styles.cardStyle,
}}>
{Object.entries({
...authScreens,
...signupScreens,
}).map(([name, component]) => {
return (
<AuthStack.Screen
key={name}
name={name}
component={component}
options={{
headerTitle: '회원가입',
headerTitleStyle: {
lineHeight: 22,
letterSpacing: -0.6,
fontFamily: 'NotoSansKR-Regular',
fontSize: ms(16),
color: color.PrimaryP900,
},
headerTitleContainerStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingVertical: ms(17),
},
headerLeftContainerStyle: {
marginHorizontal: ms(8),
marginVertical: ms(8),
},
headerBackImage: () => <NavBack style={styles.iconSize} />,
headerBackTitle: ' ',
headerRight: () => <HeaderCloseButton />,
headerRightContainerStyle: styles.headerRightContainerStyle,
}}
/>
);
})}
</AuthStack.Navigator>
);
};
export default AuthNavigation;
const styles = ScaledSheet.create({
cardStyle: { backgroundColor: '#fff' },
iconSize: { width: ms(16), height: ms(16) },
headerRightContainerStyle: {
paddingVertical: ms(20),
paddingHorizontal: ms(20),
},
});
navigation.dispatch(StackActions.popToTop()으로 navigation에 쌓여 있던 stack을 모두 없애고 초기 화면(로그인)으로 이동한다.
import React from 'react';
import { TouchableOpacity } from 'react-native';
import ClosePrimary from '~/Assets/Icons/close_primary.svg';
import { useNavigation, StackActions } from '@react-navigation/native';
const HeaderCloseButton = () => {
const navigation = useNavigation();
return (
<TouchableOpacity
style={{ width: 24, height: 24 }}
onPress={() => navigation.dispatch(StackActions.popToTop())}>
<ClosePrimary width={16} height={16} />
</TouchableOpacity>
);
};
export default HeaderCloseButton;