FrontEnd/React Native

[react native] 텍스트 입력 textInput

무무둥 2023. 2. 25. 22:44

https://reactnative.dev/docs/textinput

 

TextInput · React Native

A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.

reactnative.dev

 

Props

- placeholder

- keyboardType : 입력모드에 들어갔을 때 키보드 유형을 지정해 준다. 직접 사용해 보면서 비교해 보도록 하자..

    - 다중 플랫폼 지원
    default, number-pad, decimal-pad, numeric, email-address, phone-pad, url
    - ios 전용
    ascii-capable, numbers-and-punctuation, name-phone-pad, twitter, web-search
    - Android 전용
    visible-password

 

- returnKeyType : 키보드 우측 하단 버튼 유형을 지정해 준다.

요버튼

    - 다중 플랫폼 지원
    done, go, next, search, send
    - ios 전용
    default, emergency-call, google, join, route, yahoo
    - Android 전용
    none, previous

 

 

 

- secureTextEntry : 텍스트를 마스킹 처리한다. (ex 비밀번호)

- multiline : 여러 줄 입력이 가능하도록 지정

- onChangeText : 입력 값 변경이 있을 때 동작하는 함수를 지정해 줄 수 있다.

                             function(event) { ... } event는 변경된 문자열을 반환해 준다.

 

- autoCapitalize : 특정 문자를 자동으로 대문자로 변환할 수 있도록 도움을 준다.

                             characters, words, sentences, none

- onSubmitEditing : 입력(엔터) 이벤트를 지정해 준다.

이외에도 textInput 컴포넌트는 Props가 아주아~~~~주 많으니 꼭 확인해 보도록 하자!