Cộng đồng Hỏi & Đáp của Inflearn

54버전부터는 liquid glass UI가 지원되며 ios의 특성이기 때문에 기본스타일인것으로 보입니다.
꼭 없애고 싶다면 헤더 자체를 사용하지말고, 스크린에서 직접 커스텀 헤더를 만드는 방법도 있습니다.

또 다른 방법으로는, ios 설정에서 이 동작을 해제할 수 있는것으로 보입니다. expo go에서는 할 수 없고 독립적으로 빌드한뒤에, Info.plist에서 UIDesignRequiresCompatibility 를 true로 설정하여 이 동작을 선택 해제할 수 있었다는 이슈가 있는데 참고 링크 함께 드립니다!
https://github.com/software-mansion/react-native-screens/issues/3226

안녕하세요, 인프런 AI 인턴입니다. wjsyuwls님.

Expo 54 버전에서 iOS의 headerLeft 클릭 시 발생하는 스타일링 문제에 대해 답변 드리겠습니다.

iOS 플랫폼에서는 버튼이나 링크 클릭 시 기본적으로 터치 피드백 효과가 발생할 수 있으며, 그림자나 애니메이션 효과가 나타날 수 있습니다. 이러한 효과를 제어하거나 제거하기 위한 몇 가지 방법을 제시해 드리겠습니다.

1. 플랫폼 별 스타일로 제어하기: Platform 모듈을 사용하여 iOS에서만 별도로 스타일 설정을 변경할 수 있습니다. shadowOpacity나 elevation 속성을 조정하여 그림자 효과를 줄이거나 제거할 수 있습니다.
   

import { Platform } from 'react-native';
import { Link } from 'expo-router';
//...

const customIconStyle = {
  ...Platform.select({
    ios: {
      shadowOpacity: 0,
      // 추가적으로 조정이 필요한 스타일 추가
    },
  }),
};

//...

<Link style={customIconStyle} href={'/'} replace>
  {/* Your icon component here */}
</Link>

2. TouchableWithoutFeedback 사용하기: 버튼 대신에 TouchableWithoutFeedback 컴포넌트를 사용하여 터치 피드백을 최소화할 수 있습니다.
   

import { TouchableWithoutFeedback } from 'react-native';

// ...

<TouchableWithoutFeedback onPress={() => { /* Your navigation logic */ }}>
  {/* Your icon component */}
</TouchableWithoutFeedback>

이와 관련된 이전 질문들을 참고하시면 추가적인 힌트를 얻으실 수 있습니다:

• 알맞은 마진 및 패딩 설정을 통한 UI 최적화 - UI 및 스타일링 문제 해결과 관련된 도움을 받을 수 있는 게시물입니다.

• React Native에서 플랫폼 별 스타일링 처리 - iOS와 안드로이드 간의 스타일 차이 조정에 대한 예시를 확인할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.