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

하루종일 붙들고 있었는데 도통 해결이 되지 않아서 강의 도중하차 합니다...ㅠㅠ 해결방법이 제겐 보이지 않네요 ㅎㅎ..

pdadmin에서 회원데이터는 잘 쌓인것을 확인하셨나요? 글작성이 안되는 코드 깃헙으로 올려주시면 저도 확인해보겠습니다!

네 회원데이터는 잘 쌓이는걸 확인했구요 write.tsx에서 아래와 같이 쓰면 저장이 잘 되는것도 확인했습니다. 상단에 버튼만 적용이 안되더라구요

 <FormProvider {...postForm}>
      <KeyboardAwareScrollView contentContainerStyle={styles.container}>
        <TitleInput />
        <DescriptionInput />
        <VoteAttached />
        <ImagePreviewList imageUris={postForm.watch().imageUris} />
        <TouchableOpacity
          onPress={postForm.handleSubmit(onSubmit)}
          style={{
            backgroundColor: "orange",
            padding: 16,
            borderRadius: 8,
            marginTop: 16,
          }}
        >
          <Text style={{ color: "white", textAlign: "center" }}>
            테스트 저장
          </Text>
        </TouchableOpacity>
      </KeyboardAwareScrollView>

      <PostWriteFooter />
      <VoteModal />
    </FormProvider>

혹시 컴포넌트나 뭘 잘못 불러왔나 싶어서 기본 버튼으로 테스트 해봤는데 눌렀다는 콘솔이 안찍히더라구여 그래서 여러가지로 확인을해봤더니

        headerRight: () => {
        console.log("Rendering header button");
        return (
          <Button
            title="저장"
            onPress={() => {
              console.log("Header button pressed");
              postForm.handleSubmit(onSubmit)();
            }}
          />

headerRight 여기문제 같아요 왜냐면 헤더에 <- (뒤로가기) 버튼도 눌리진 않더라구여 어떻게 하면 해결 할 수 있을지 몰라서 우선 내일 더 해보도록하겠습니다 ㅠㅠ 제가 초보라 어렵네요^^;...

강의자료 올려주신거 그대로 받아서 모듈 다 설치하고 디비 연결해도 똑같더라구요ㅠㅠ

회원가입만 잘되고 직접 글쓰기 버튼에서만 글 작성이 잘 되영 ㅠㅠ

그럼 백엔드연결은 문제가없고, 헤더 문제가 맞겠네요! 코드를 일부분이 아닌 깃헙으로 전체를 올려주시면 저도 실행해서 확인해보겠습니다.

이렇게 친절히 답변 달아주셔서 너무 감사합니다 ㅠㅠ

https://github.com/webseed87/avatar-community

git 주소 입니다 테스트 글쓰기 버튼으론 디비에 잘 저장 되는거 확인했습니다.

상단만 저장 버튼이 안먹히더라구요

결국 해결하긴 헀습니다 ios에서는 문제가 없었는데 안드로이드에서 문제가 있었어요 ㅠㅠ

https://github.com/react-navigation/react-navigation/issues/7052

이글을 참고해서 아래처럼 바꾸니 되긴합니다만 저렇게 써도 되는지 궁금합니다 ㅠㅠ

제가 맥이 아니라 윈도우고 안드로이드 환경에서만 테스트가 가능합니다.

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

저도 찾아보니 cli에선 발생하지 않았던것 같은데, expo 안드로이드 기기에서 발생하는 이슈로 보입니다.

링크주신 이슈뿐만아니라 여러 이슈들을 찾아볼 수 있었고 (https://github.com/expo/expo/issues/29489)
(https://github.com/expo/expo/issues/30032)

저 또한 실제 안드로이드 기기에서 해당 이슈를 재현할 수 있었습니다! 저는 시뮬레이터에선 재현이 안됐는데 실기기에선 재현이 되네요.

onPressIn 이나 onPressOut으로 해결했다는 코멘트들이 많았는데요. 이렇게 해결하는것이 좋아보입니다. 또 다른 방법으로는 onPress와 함께 pressRetentionOffset={1000} 속성을 지정해도 동작합니다.

모든 Pressable에서 onPressIn또는 onPressOut props를 추가하거나, Pressable을 한번 래핑하는 컴포넌트를 만들어서, Pressable를 사용하는 대신 새로 만든 컴포넌트로 대체하는 방법이 좋을것 같습니다.

예시)

import { ReactNode } from "react";
import { Pressable, PressableProps, Platform } from "react-native";

interface CustomPressableProps extends PressableProps {
  children: ReactNode;
}

function CustomPressable({ children, ...props }: CustomPressableProps) {
  const pressHandlerProps =
    Platform.OS === "android"
      ? { onPressIn: props.onPress || props.onPressIn }
      : { onPress: props.onPress };

  return (
    <Pressable {...props} {...pressHandlerProps}>
      {children}
    </Pressable>
  );
}

export default CustomPressable;

친절한 답변감사합니다!!