리액트 네이티브에서 제공해주는 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
- 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과 같이 참조 되어야합니다.
<TextInput inlineImageLeft='search_icon' />
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
- 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
- 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