inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

아바타 커뮤니티앱 만들기 (React Native Expo)

[3-3] 로그인/회원가입 스크린 마크업

style 에러

해결된 질문

118

cmj021002

작성한 질문수 1

0

안녕하세요 강사님 코드를 따라치면서 학습을 하고 있는데

<View style={styles.fixed}>

이 style 부분에

No overload matches this call.
Overload 1 of 2, '(props: ViewProps): View', gave the following error.
Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'StyleProp<ViewStyle>'.
Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'ViewStyle'.
Types of property 'position' are incompatible.
Type 'string' is not assignable to type '"absolute" | "static" | "relative" | "fixed" | "sticky" | undefined'.
Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'StyleProp<ViewStyle>'.
Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'ViewStyle'.
Types of property 'position' are incompatible.
Type 'string' is not assignable to type '"absolute" | "static" | "relative" | "fixed" | "sticky" | undefined'.ts(2769)

ViewPropTypes.d.ts(203, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'

ViewPropTypes.d.ts(203, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'

(property) style?: StyleProp<ViewStyle>

View Problem (Alt+F8)



이런 에러가 뜨는데 제가 어느 부분에서 잘못했는지, 왜 이런 에러가 발생했는지 모르겠습니다....

전체 코드는 아래와 같습니다.

import CustomButton from '@/components/CustomButton';
import InputFiled from '@/components/InputFiled';
import { colors } from '@/constants';
import { StyleSheet, View } from 'react-native';

export default function LoginScreen() {
  return (
    <>
      <View style={styles.container}>
        <InputFiled
          label="이메일"
          placeholder="이메일을 입력해주세요"
        ></InputFiled>
        <InputFiled
          label="비민번호"
          placeholder="비밀번호를 입력해주세요"
        ></InputFiled>
      </View>
      <View style={styles.fixed}>
        <CustomButton label="로그인하기"></CustomButton>
      </View>
    </>
  );
}

const styles = {
  container: {
    flex: 1,
    margin: 16,
    gap: 16,
  },
  fixed: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: colors.GRAY_300,
    paddingTop: 12,
    paddingHorizontal: 16,
  },
};

javascript react react-native typescript react-query

답변 1

0

Kyo

스타일 코드를 선언할때, const styles = StyleSheet.create({}) 로 해보시겠어요?

secureTextEntry 설정에 관해

0

58

2

expo 55 tabs 사라짐 이슈

0

83

2

백엔드도 궁금합니다!

1

86

1

댓글 버튼 하단에 고정되지 않는 이슈

0

53

1

SafeAreaView 적용 기준 문의

0

82

2

스크린 옵션 아이콘

0

56

2

[Note] 안드로이드 네비게이션 헤더 이슈 안내

0

67

2

ActionSheet

0

87

1

안드로이드 폰과 PC에서 테스트할때 화면 안보임과 오류 문의

0

99

1

iOS 빌드 후 실기기에서 앱 시작

1

71

1

[5-2] 글 목록 무한스크롤 구현하기 with InfiniteQuery 10:40/ useScrollTop(ref) 사용관련

0

84

2

클라이언트 사이드에서 세션 관련 질문

0

82

2

Android 에뮬레이터 환경설정 및 실행 (for Mac) 에러 문의

0

113

1

[5-13] useLikePost 쿼리 구현 중 Tanstack Query 관련 질문

0

63

1

Expo 54 버전 ios에서 headerLeft

1

140

2

어플 개발 후 배포 시에 주의할 사항이 있을까요?

0

79

1

코드 수정 시 ios 시뮬레이터에서 자동반영이 안 되는데 왜그럴까요?

0

92

1

텍스트가 다 상단위로 올라가있는데 어떻게 해야할까요?

0

78

2

Axios Network error...

0

151

2

강의는 52버전인데 expo가 현재 54버전이에요

0

310

1

[TIP] SafeAreaView 사용할 때마다 자꾸 ios에서 위아래가 빵꾸 나시는 분들 필독

0

238

2

키보드 이슈 관련 해결 질문

0

74

1

android header를 ios처럼 바꾸기

0

70

1

CustomButton 코드 버튼 관련 질문

0

66

1