inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

[3-2] 공통 인풋 컴포넌트 구현하기

공통 인풋 컴포넌트 구현하기에서 variant가 계속 빨간색 오류뜨는데요;

해결된 질문

144

ksw

작성한 질문수 16

0

image.png

import React from 'react';
import { colors } from "@/constants";
import {StyleSheet, TextInput, View,Text, TextInputProps} from 'react-native';

interface InputFieldProps extends TextInputProps{
label?:string;
variant?: "filled" | "standard" | "outlined";
}

function InputField({label, variant = "filled", ...props }: InputFieldProps) {
  return (
    <View>
        {label && <Text style={styles.label}>{label}</Text>}
        <View style={[styles.container, styles[variant]]}>
        <TextInput style={styles.input} {...props} />
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
    container:{
        height:44,
        borderRadius:8,
        paddingHorizontal:10,
        justifyContent:"center",
        alignItems:"center",
    },
    label:{
        fontSize:12,
        color: colors.GRAY_700,
        marginBottom:5,
    },
    filled:{
        backgroundColor: colors.GRAY_100,
    },
    standard: {},
    outline: {},
    input: {
        fontSize:16,
        padding: 0,
        flex:1,
    },
});

export default InputField;

도와주세요,,선생님 ㅠㅠ

javascript react react-native typescript react-query

답변 1

1

Kyo

위에 명시한 variant 타입은 filled, standard, outlined 인데요, 아래 styles에서는 outline 이라고 했기 때문입니다. 똑같이 맞춰주시면 타입에러가 없어질거예요.

1

ksw

선생님 해결되었습니다!! ㅠㅠ
고맙습니다!

secureTextEntry 설정에 관해

0

57

2

expo 55 tabs 사라짐 이슈

0

80

2

백엔드도 궁금합니다!

1

85

1

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

0

53

1

SafeAreaView 적용 기준 문의

0

80

2

스크린 옵션 아이콘

0

55

2

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

0

65

2

ActionSheet

0

85

1

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

0

99

1

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

1

70

1

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

0

83

2

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

0

81

2

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

0

111

1

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

0

63

1

Expo 54 버전 ios에서 headerLeft

1

139

2

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

0

78

1

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

0

91

1

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

0

78

2

Axios Network error...

0

151

2

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

0

307

1

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

0

234

2

키보드 이슈 관련 해결 질문

0

74

1

android header를 ios처럼 바꾸기

0

68

1

CustomButton 코드 버튼 관련 질문

0

66

1