인프런 커뮤니티 질문&답변

강의에서는 패딩으로 간격만 주셨지만 전 통일성을 주고 싶어 ios처럼 android header의 title도 중앙에 오게 하고 싶어 제가 한 방법을 공유하기 위해 글 작성합니다..!

일단 android일때만 headerTitleAlign 기능을 주기 위해 constants폴더에 플랫폼에 대한 플래그 변수를 만들었습니다.

// /constants/platform.ts

import { Platform } from "react-native";

export const isAndroid = Platform.OS === "android";
export const isIOS = Platform.OS === "ios";

// /app/auth/_layout.ts
import { colors } from "@/constants";
import { isAndroid } from "@/constants/platform";
import Foundation from "@expo/vector-icons/Foundation";
import { Link, Stack } from "expo-router";

export default function AuthLayout() {
  return (
    <Stack
      screenOptions={{
        headerTintColor: colors.BLACK,
        contentStyle: {
          backgroundColor: colors.WHITE,
        },
      }}
    >
      <Stack.Screen
        name="index"
        options={{
          title: "로그인",
          headerShown: true,
          headerStyle: {},
          ...(isAndroid && { headerTitleAlign: "center" }),
          headerLeft: () => (
            <Link href={"/"} replace style={{ paddingRight: 5 }}>
              <Foundation name="home" size={28} color={"black"} />
            </Link>
          ),
        }}
      />
    </Stack>
  );
}

 그 다음 안드로이드일 때만 헤더 텍스트를 중아에 오도록 지정했습니다!