Written on
·
47
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};
문제화면
몇번을 다시보고 input field를 다시 만들어서 해봐도 안되서 도움 요청드립니다 ㅜ
Answer 1
0
색상을 바꿔도 안되네요 ㅜ
클릭했을 때 키보드가 안뜨는 문제랑 엮여있는건 아닐까요?
import를 다른거 한 것도 아닌거 같은데..
다른 설정 없이 text input을 클릭 했을때 입력창이 떠야 하는건 맞죠~?