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

저장 버튼을 동일하게 작성했는데 화면상에 그려지지 않더라구요. 공식문서도 확인해보고 찾아보는데, isFocused나 useLayoutEffect등을 통해 실험해봐도 저장 버튼이 보이지 않습니다.

무엇을 잘못 작성했나 싶어 자료를 다운로드 받아 post 의 _layout.tsx 와 write.tsx도 복사, 붙여넣기 하여 확인했는데도 저장버튼이 보이지 않았습니다.

그런데, post의 _layout에서 headerRight을 작성하니 보입니다.

setOptions가 동작하지 않는 것 같이 보이는데, 원인을 잘 모르겠습니다.

어떻게 해결하면 될까요?

import CustomButton from "@/components/CustomButton";
import DescriptionInput from "@/components/DescriptionInput";
import TitleInput from "@/components/TitleInput";
import useCreatePost from "@/hooks/queries/useCreatePost";
import { ImageUri } from "@/types";
import { useNavigation } from "expo-router";
import { useEffect } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { StyleSheet } from "react-native";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

type FormValues = {
  title: string;
  description: string;
  imageUris: ImageUri[];
};

export default function PostWriteScreen() {
  const navigation = useNavigation();
  const createPost = useCreatePost();
  const postForm = useForm<FormValues>({
    defaultValues: {
      title: "",
      description: "",
      imageUris: [],
    },
  });

  const onSubmit = (formValues: FormValues) => {
    createPost.mutate(formValues);
  };

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <CustomButton
          label="저장"
          size="medium"
          variant="standard"
          onPress={postForm.handleSubmit(onSubmit)}
        />
      ),
    });
  }, []);

  return (
    <FormProvider {...postForm}>
      <KeyboardAwareScrollView contentContainerStyle={styles.container}>
        <TitleInput />
        <DescriptionInput />
      </KeyboardAwareScrollView>
    </FormProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    gap: 16,
  },
});

import { colors } from "@/constants";
import { Feather } from "@expo/vector-icons";
import { Link, Stack } from "expo-router";

export default function PostLayout() {
  return (
    <Stack
      screenOptions={{
        headerTintColor: colors.BLACK,
        contentStyle: {
          backgroundColor: colors.WHITE,
        },
      }}
    >
      <Stack.Screen
        name="write"
        options={{
          title: "글쓰기",
          headerShown: true,
          headerLeft: () => (
            <Link href={"/"} replace>
              <Feather name="arrow-left" size={28} color={"black"} />
            </Link>
          ),
        }}
      />
    </Stack>
  );
}

+추가로 확인한 부분.

app의 _layout.tsx에서

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

이 친구를 주석하면 헤더가 두 개 나오게 되는데, 숨겨놨던 루트에 저장 버튼이 떠 있더라구요.

이걸 어떻게 수정하면 되는건지.. 어렵네요