[React-Native] 리액트 네이티브 TextInput

React, React-Native

[React-Native] 리액트 네이티브 TextInput

ITSkeleton 2020. 7. 4. 13:28

728x90

리액트 네이티브에서 제공해주는 TextInput이 있습니다.

이 TextInput은 많은 기능이 있습니다. 스타일 또한 자유롭게 사용이 가능하며 포커스, 값변경시 등 체크가 가능합니다.

const [value, onChangeText] = React.useState('값');

<TextInput
 style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
 onChangeText={text => onChangeText(text)}
 value={value}
/>

이렇게 사용을 할 수 있습니다.

allowFontScaling

텍스트 크기 접근성 설정을 고려하여 글꼴 크기를 조정할지 여부를 지정합니다. 기본값은 true입니다.

autoCapitalize

TextInput특정 문자를 자동으로 대문자로 표시 할 수 있습니다. 이 속성은과 같은 일부 키보드 유형에서는 지원되지 않습니다 name-phone-pad.

characters: 모든 문자.
words: 각 단어의 첫 글자.
sentences: 각 문장의 첫 글자 ( 기본값 ).
none: 자동으로 대문자를 사용하지 마십시오.

autoCompleteType

시스템에 자동 완성 힌트를 지정하여 자동 완성을 제공 할 수 있습니다. Android에서 시스템은 항상 휴리스틱을 사용하여 컨텐츠 유형을 식별하여 자동 완성을 제공하려고 시도합니다. 자동 완성을 비활성화하려면로 설정 autoCompleteType하십시오 off.

가능한 값 autoCompleteType은 다음과 같습니다.

off
username
password
email
name
tel
street-address
postal-code
cc-number
cc-csc
cc-exp
cc-exp-month
cc-exp-year

autoCorrect

인 경우 false자동 수정을 사용하지 않습니다. 기본값은 true입니다.

autoFocus

인 경우 true입력에 초점을 맞 춥니 다 componentDidMount. 기본값은 false입니다.

blurOnSubmit

인 경우 true제출시 텍스트 필드가 흐리게 표시됩니다. 한 줄 필드의 경우 기본값은 true이고 여러 줄 필드의 경우 false입니다. 여러 줄 필드의 경우로 설정 blurOnSubmit하면 truereturn 키를 누르면 필드 onSubmitEditing에 줄 바꿈을 삽입하는 대신 필드가 흐리게 표시되고 이벤트가 트리거 됩니다.

caretHidden

인 경우 true캐럿이 숨겨집니다. 기본값은 false입니다.

clearButtonMode

텍스트보기의 오른쪽에 지우기 단추가 나타나는 경우 이 속성은 단일 행 TextInput 구성 요소에서만 지원됩니다. 기본값은 never입니다.

clearTextOnFocus

인 경우 true편집을 시작할 때 텍스트 필드를 자동으로 지 웁니다.

contextMenuHidden

인 경우 true상황에 맞는 메뉴가 숨겨집니다. 기본값은 false입니다.

dataDetectorTypes

텍스트 입력에서 클릭 가능한 URL로 변환 된 데이터 유형을 결정합니다. if multiline={true}및 에만 유효합니다 editable={false}. 기본적으로 데이터 유형이 감지되지 않습니다.

하나의 유형 또는 여러 유형의 배열을 제공 할 수 있습니다.

가능한 값 dataDetectorTypes은 다음과 같습니다.

'phoneNumber'
'link'
'address'
'calendarEvent'
'none'
'all'

defaultValue

사용자가 입력을 시작할 때 변경 될 초기 값을 제공합니다. 제어 된 상태를 동기화 상태로 유지하기 위해 이벤트 청취 및 값 소품 업데이트를 처리하지 않으려는 유스 케이스에 유용합니다.

disableFullscreenUI

때 false텍스트 입력 (전화에 예를 들어 가로 방향)의 주위에 사용할 수있는 공간의 작은 금액이있는 경우, 운영 체제는 사용자의 편집을 전체 화면 텍스트 입력 모드의 텍스트 내부를 선택할 수 있습니다. 때 true,이 기능이 비활성화되어 사용자가 항상 직접 내부의 텍스트 입력의 텍스트를 편집합니다. 기본값은 false입니다.

editable

인 경우 false텍스트를 편집 할 수 없습니다. 기본값은 true입니다.

enablesReturnKeyAutomatically

인 경우 true, 키보드는 텍스트가 없을 때 리턴 키를 비활성화하고 텍스트가있을 때 자동으로 활성화합니다. 기본값은 false입니다.

importantForAutofill

앱에서 개별 필드가 안드로이드 API 레벨 26+에 자동 채우기 목적으로보기 구조에 포함해야하는지 여부를 시스템 말해, 가능한 값은 auto, no, noExcludeDescendants, yes, yesExcludeDescendants. 기본값은 auto입니다.

auto: Android 시스템에서 휴리스틱을 사용하여보기가 자동 완성에 중요한지 결정합니다.
no:이보기는 자동 완성에 중요하지 않습니다.
noExcludeDescendants:이보기와 해당 자식은 자동 완성에 중요하지 않습니다.
yes:이보기는 자동 완성에 중요합니다.
yesExcludeDescendants:이보기는 자동 완성에 중요하지만 그 자식은 자동 완성에 중요하지 않습니다.

inlineImageLeft

정의 된 경우 제공된 이미지 리소스가 왼쪽에 렌더링됩니다. 이미지 리소스는 내부에 있어야하며 다음 /android/app/src/main/res/drawable과 같이 참조 되어야합니다.

inlineImagePadding

인라인 이미지 (있는 경우)와 텍스트 입력 사이의 패딩.

inputAccessoryViewID

사용자 정의 InputAccessoryView 를이 텍스트 입력에 연결하는 선택적 식별자입니다 . 이 텍스트 입력에 초점을 맞추면 InputAccessoryView가 키보드 위에 렌더링됩니다.

keyboardAppearance

키보드의 색상을 결정합니다.

keyboardType

열 키보드를 결정합니다 (예 :) numeric.

다음 값이 플랫폼에서 작동합니다.

default
number-pad
decimal-pad
numeric
email-address
phone-pad

iOS 만

다음 값은 iOS에서만 작동합니다.

ascii-capable
numbers-and-punctuation
url
name-phone-pad
twitter
web-search

안드로이드 전용

다음 값은 Android에서만 작동합니다.

visible-password

maxFontSizeMultiplier

사용 가능한 경우 글꼴이 도달 할 수있는 가장 큰 배율을 지정합니다 allowFontScaling. 가능한 값 :

null/undefined (기본값) : 부모 노드 또는 전역 기본값 (0)에서 상속
0: 최대 값 없음, 상위 / 전역 기본값 무시
>= 1: maxFontSizeMultiplier이 노드의 값을이 값으로 설정합니다

maxLength

입력 할 수있는 최대 문자 수를 제한합니다. 깜박임을 피하기 위해 JS에서 로직을 구현하는 대신 이것을 사용하십시오.

multiline

인 경우 true텍스트 입력은 여러 줄이 될 수 있습니다. 기본값은 false입니다. 이렇게하면 iOS에서 텍스트가 맨 위에 정렬되고 Android의 중앙에 놓이게됩니다. 두 플랫폼 모두에서 동일한 동작 textAlignVertical을 top위해 로 설정하여 사용하십시오 .

numberOfLines

의 줄 수를 설정합니다 TextInput. true라인을 채울 수 있도록 여러 줄을 설정하여 사용하십시오 .

onBlur

텍스트 입력이 흐리게 표시 될 때 호출되는 콜백입니다.

onChange

텍스트 입력의 텍스트가 변경 될 때 호출되는 콜백. 이것은 함께 호출됩니다{ nativeEvent: { eventCount, target, text} }

onChangeText

텍스트 입력의 텍스트가 변경 될 때 호출되는 콜백. 변경된 텍스트는 단일 문자열 인수로 콜백 핸들러에 전달됩니다.

onContentSizeChange

텍스트 입력의 내용 크기가 변경 될 때 호출되는 콜백입니다. 로 호출됩니다 { nativeEvent: { contentSize: { width, height } } }.

여러 줄 문자 입력에만 호출됩니다.

onEndEditing

텍스트 입력이 끝나면 호출되는 콜백.

onFocus

텍스트 입력에 초점을 맞출 때 호출되는 콜백. 이것은로 호출됩니다 { nativeEvent: { target } }.

onKeyPress

키를 누를 때 호출되는 콜백. 이것은 호출 될 { nativeEvent: { key: keyValue } }곳 keyValue이다 'Enter'또는 'Backspace'각각의 키에 대한과는 입력 된 문자 그렇지 포함 ' '공간. onChange콜백 전에 발생합니다 . 참고 : Android에서는 하드웨어 키보드 입력이 아닌 소프트 키보드의 입력 만 처리됩니다.

onLayout

로 마운트 및 레이아웃 변경시 호출됩니다 { nativeEvent: {layout: {x, y, width, height}, target } }.

onScroll

로 콘텐츠 스크롤시 호출됩니다 { nativeEvent: { contentOffset: { x, y } } }. ScrollEvent의 다른 속성도 포함 할 수 있지만 성능상의 이유로 Android contentSize는 제공되지 않습니다.

onSelectionChange

텍스트 입력 선택이 변경 될 때 호출되는 콜백. 로 호출됩니다 { nativeEvent: { selection: { start, end } } }. 이 소품 multiline={true}을 설정 해야 합니다.

onSubmitEditing

텍스트 입력의 제출 버튼을 인수와 함께 누르면 호출되는 콜백입니다 {nativeEvent: {text, eventCount, target}}.

iOS에서는이 메소드를 사용할 때 호출되지 않습니다 keyboardType="phone-pad".

onTextInput

인수를 사용하여 새 텍스트 입력에서 호출되는 콜백입니다 { nativeEvent: { text, previousText, range: { start, end } } }. 이 소품 multiline={true}을 설정 해야 합니다.

placeholder

텍스트 입력 전에 렌더링 될 문자열입니다.

placeholderTextColor

자리 표시 자 문자열의 텍스트 색입니다.

returnKeyLabel

리턴 키를 레이블로 설정합니다. 대신에 사용하십시오 returnKeyType.

returnKeyType

리턴 키의 모양을 결정합니다. Android에서는을 사용할 수도 있습니다 returnKeyLabel.

크로스 플랫폼

다음 값이 플랫폼에서 작동합니다.

done
go
next
search
send

안드로이드 전용

다음 값은 Android에서만 작동합니다.

none
previous

iOS 만

다음 값은 iOS에서만 작동합니다.

default
emergency-call
google
join
route
yahoo

rejectResponderTermination

iOS 만

인 경우 trueTextInput이 터치 이벤트를 부모 구성 요소에 전달할 수 있습니다. 이를 통해 기본적으로 Android의 경우와 같이 iOS의 TextInput에서 SwipeableListView와 같은 구성 요소를 스 와이프 할 수 있습니다. 인 경우 falseTextInput은 항상 입력을 처리하도록 요청합니다 (비활성화 된 경우 제외). 기본값은 true입니다.

scrollEnabled

인 경우 false텍스트보기 스크롤이 비활성화됩니다. 기본값은 true입니다. 에서만 작동합니다 multiline={true}.

secureTextEntry

인 경우 true비밀번호와 같은 민감한 텍스트가 안전하게 유지되도록 텍스트 입력이 입력 한 텍스트를가립니다. 기본값은 false입니다. 와 작동하지 않습니다 multiline={true}.

selection

텍스트 입력 선택의 시작과 끝. 시작 및 종료를 동일한 값으로 설정하여 커서를 배치하십시오.

selectionColor

텍스트 입력의 하이라이트 및 커서 색상.

selectTextOnFocus

인 경우 true모든 텍스트가 초점에 자동으로 선택됩니다.

showSoftInputOnFocus

때 false,이 분야에 초점이 맞춰지면 게재 소프트 키보드를 방지 할 수 있습니다. 기본값은 true입니다.

spellCheck

인 경우 false맞춤법 검사 스타일을 비활성화합니다 (예 : 빨간색 밑줄). 기본값은에서 상속됩니다 autoCorrect.

textAlign

입력 텍스트를 입력 필드의 왼쪽, 가운데 또는 오른쪽에 맞 춥니 다.

가능한 값 textAlign은 다음과 같습니다.

left
center
right

textContentType

사용자가 입력 한 컨텐츠에 대해 예상되는 의미의 의미에 대한 키보드 및 시스템 정보를 제공하십시오.

iOS 용 11 +을 설정할 수 있습니다 textContentType로 username또는 password장치 키 체인에서 로그인 정보의 자동 완성 사용 할 수 있습니다.

iOS 12 이상 newPassword을 사용하면 사용자가 키 체인에 저장하려는 새 비밀번호 입력 oneTimeCode을 표시하고 SMS에 도착한 코드로 필드를 자동 채울 수 있음을 나타낼 수 있습니다.

자동 완성을 비활성화하려면로 설정 textContentType하십시오 none.

가능한 값 textContentType은 다음과 같습니다.

none
URL
addressCity
addressCityAndState
addressState
countryName
creditCardNumber
emailAddress
familyName
fullStreetAddress
givenName
jobTitle
location
middleName
name
namePrefix
nameSuffix
nickname
organizationName
postalCode
streetAddressLine1
streetAddressLine2
sublocality
telephoneNumber
username
password
newPassword
oneTimeCode

passwordRules

iOS에서 textContentType와 같이 사용 newPassword하면 암호를 만족시키는 암호를 생성 할 수 있도록 암호의 최소 요구 사항을 OS에 알릴 수 있습니다. 유효한 문자열을 만들려면 Apple Docs를PasswordRules 살펴보십시오 .

style

모든 텍스트 스타일이 지원되는 것은 아니며 지원되지 않는 불완전한 목록에는 다음이 포함됩니다.

borderLeftWidth
borderTopWidth
borderRightWidth
borderBottomWidth
borderTopLeftRadius
borderTopRightRadius
borderBottomRightRadius
borderBottomLeftRadius

textBreakStrategy

안드로이드 API 레벨 23+에 설정 텍스트 휴식 전략은 가능한 값은 simple, highQuality, balanced기본값입니다 simple.

underlineColorAndroid

TextInput밑줄 의 색입니다 .

value

텍스트 입력에 표시 할 값입니다. TextInput제어 된 구성 요소로, 제공된 경우 기본 값이이 값 소품과 일치하도록 강제됩니다. 대부분의 경우이 방법이 효과적이지만 어떤 경우에는 깜박임이 발생할 수 있습니다. 일반적인 원인 중 하나는 값을 동일하게 유지하여 편집을 방해하는 것입니다. 동일한 값을 설정하는 것 외에도 set editable={false}또는 set / update maxLength를 사용하면 깜박임없이 원치 않는 편집을 방지 할 수 있습니다.

Methods

.focus(): 기본 입력 요청을 집중시킵니다.

.blur(): 초점을 잃게 만듭니다.

.clear(): 모든 텍스트를 제거합니다

.isFocused(): 현재 초점이 맞는지 반환 합니다.

React Native · A framework for building native apps using React

A framework for building native apps using React

reactnative.dev

728x90

현재글[React-Native] 리액트 네이티브 TextInput