인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

최광훈님의 프로필 이미지
최광훈

작성한 질문수

맛집 지도앱 만들기 (React Native + NestJS)

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

[3-2] TextInput 작동이 안됩니다

작성

·

49

0

안녕하세요!

천천히 따라서 코딩 하고 있었는데, 잘 따라 한것 같은데 InputField 설정 이후에 LoginScreen에서 placeholder 가 작동하지 않아서보니 클릭해도 키보드가 열리지 않더라고요

  • InputField.tsx

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

interface InputFieldProps extends TextInputProps {
  disabled?: boolean;
  error?: string;
}
const deviceHeight = Dimensions.get('screen').height;
function InputField({disabled = false, error, ...props}: InputFieldProps) {
  return (
    <View
      style={[
        styles.container,
        disabled && styles.disabled,
        Boolean(error) && styles.inputError,
      ]}>
      <TextInput
        editable={!disabled}
        placeholderTextColor={colors.GRAY_500}
        style={[styles.input, disabled && styles.disabled]}
        autoCapitalize="none"
        spellCheck={false}
        autoCorrect={false}
        {...props}
      />
      {Boolean(error) && <Text style={styles.error}>{error}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: colors.GRAY_200,
    padding: deviceHeight > 700 ? 15 : 10,
  },
  input: {
    fontSize: 16,
    color: colors.BLACK,
    padding: 0,
  },
  disabled: {
    backgroundColor: colors.GRAY_200,
    color: colors.GRAY_700,
  },
  inputError: {
    borderWidth: 1,
    borderColor: colors.RED_300,
  },
  error: {
    color: colors.RED_500,
    fontSize: 12,
    paddingTop: 5,
  },
});

export default InputField;

 

  • LoginScreen.tsx

import React from 'react';
import {SafeAreaView, StyleSheet, View} from 'react-native';
import InputField from '../../components/InputField';

function LoginScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.inputContainer}>
        <InputField placeholder="이메일" error={'이메일을 입력해주세요.'} />
        <InputField placeholder="비밀번호" />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  inputContainer: {
    flex: 1,
    margin: 30,
  },
  container: {
    gap: 20,
  },
});

export default LoginScreen;

 

  • color.ts

const colors = {
  WHITE: '#ffff',
  PINK_500: '#BF5C79',
  PINK_700: '#C63B64',
  RED_300: '#FFB4B4',
  RED_500: '#FF5F5F',
  GRAY_200: '#E7E7E7',
  GRAY_500: '#E8E8E8',
  GRAY_700: '#E575757',
  BLACK: '#000',
};

export {colors};

 

  • 문제화면

    image.png

 

몇번을 다시보고 input field를 다시 만들어서 해봐도 안되서 도움 요청드립니다 ㅜ

답변 1

0

Kyo님의 프로필 이미지
Kyo
지식공유자

아래부분 컬러가 잘못된것같은데 수정해보시겠어요? 앱도 껐다가 다시빌드해보시구요!

GRAY_700: '#E575757', -> #575757

최광훈님의 프로필 이미지
최광훈
질문자

색상을 바꿔도 안되네요 ㅜ

클릭했을 때 키보드가 안뜨는 문제랑 엮여있는건 아닐까요?

import를 다른거 한 것도 아닌거 같은데..

다른 설정 없이 text input을 클릭 했을때 입력창이 떠야 하는건 맞죠~?

지나가다가 봤는데 커맨드 쉬프트 k 인가? 하시면 키보드 나오게 하거나 할 수 있는데 한번 해보시면 어떨지..

최광훈님의 프로필 이미지
최광훈

작성한 질문수

질문하기