인프런 커뮤니티 질문&답변
작성한 질문수
3-2 에서 안드로이드랑 아이폰 Header쪽 스타일 다르게 주신 이유가있으실까요?
해결된 질문
작성
·
124
0
import { Link, Stack } from 'expo-router';
import Foundation from '@expo/vector-icons/Foundation';
import { colors } from '@/constants';
export default function AuthLayout() {
return (
<Stack
screenOptions={{
headerTintColor: colors.BLACK,
contentStyle: {
backgroundColor: colors.WHITE,
},
}}
>
<Stack.Screen
name="index"
options={{
title: '로그인',
headerTitleAlign: 'center',
headerShown: true,
headerLeft: () => (
<Link href={'/'} replace>
<Foundation name="home" size={28} color={'black'} />
</Link>
),
}}
/>
</Stack>
);
}
선생님은 Link 태그에 paddingLeft해서 안드로이드 Header에서 조정해주신반면 저는 좀 더 통일성을위해서 headerTitleAlign 을 center로 줬습니다.
이 방법이 더 괜찮아보이는데 어떤지 궁금해요!
답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다. 반가우면반갑다고해님!
질문 주신 내용에 대해 답변 드리겠습니다. 모바일 어플리케이션에서 iOS와 안드로이드 플랫폼은 각각의 네이티브 디자인 가이드라인을 따르기 때문에 스타일이 미묘하게 다를 수 있습니다. 따라서 두 플랫폼에서의 통일성을 고려하여 스타일링을 조정하는 것은 중요한 작업입니다.
React Native에서 headerTitleAlign: 'center' 속성을 사용하여 헤더의 제목을 중앙에 배치함으로써, 두 플랫폼에서 동일한 시각적 일관성을 얻는 것은 합리적인 접근 방식입니다. 이 방식은 코드의 간결함과 유지보수성을 높이는 데 도움이 될 수 있습니다. 또한, 플랫폼별로 다른 스타일이나 레이아웃을 관리하는 복잡성을 줄이면서 동일한 사용자 경험을 제공할 수 있습니다.
다만, 특정 이유로 인해 안드로이드에서만 별도의 간격 조정이 필요했던 것일 수도 있습니다. 예를 들어, 플랫폼별 기본 마진이나 패딩이 서로 다르게 설정되어 있을 수 있습니다. 따라서 이렇게 기본 설정이 달라 문제가 발생할 경우에는, 직접적인 padding 조정을 통해 해결할 수도 있습니다.
관련하여 고민하신 스타일링에는 명확한 정답이 없으며, 프로젝트의 요구 사항과 팀의 코딩 컨벤션에 따라 결정하시면 됩니다. 아래는 참고할 만한 게시물입니다:
- React Native에서 플랫폼별 헤더 스타일 조정: iOS와 안드로이드에서의 네비게이션 스타일 차이와 관련한 도움을 받을 수 있는 게시물입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
강의 감사합니다.
빠르게 보고 제걸로만들기위해서 다른 앱 클론코딩해보려고합니다
좋은강의 감사합니다.
나중에 cli강의도 구매해서 들어볼께요!