[ReactNative] TextInput 입력한 첫 글자 대문자 자동변경 막는 방법

autoCapitalize​ autoCapitalize​는 특정 문자가 자동으로 대문자로 표시되도록 TextInput에 지시합니다. 이 속성은 name-phone-pad와 같은 일부 키보드 유형에서 지원되지 않습니다. characters : 모든 문자 words : 각 단어의 첫 글자 sentences : 각 문장의 첫 글자(기본값) none : 아무 것도 자동으로 대문자로 표시하지 않습니다. 만약 TextInput에 입력한 첫글자가 대문자로 자동 변경되는 걸 막고 싶다면 autoCapitalize 속성에 'none'을 입력하면 됩니다. autoCapitalize="none" 예시 다음은 autoCapitalize가 'none'으로 설정된 React Native의 TextInput 컴포넌트를 만든 간단한..

• format_list_bulleted React
• · 2023. 4. 23.
• textsms

[ReactNative] 입력 칸 만들기 - TextInput

MyInput 컴포넌트 만들기 리액트 네이티브에서는 TextInput 컴포넌트를 사용하여 사용자가 입력한 텍스트를 전달받을 수 있습니다. 다음은 TextInput 컴포넌트를 사용하는 방법의 예입니다. import React, { useState } from 'react'; import { View, TextInput, StyleSheet } from 'react-native'; const MyInput = () => { const [text, setText] = useState(''); const onChangeText = (inputText) => { setText(inputText); }; return ( ); }; const styles = StyleSheet.create({ container: {..

• format_list_bulleted React
• · 2023. 4. 22.
• textsms

[React Native] 키보드 내리기 방법

React Native에서 화면에 이미 활성화되어 있는 키보드를 내리려면 React Native API에서 제공하는 키보드 모듈을 사용하면 됩니다. Keyboard 모듈은 키보드를 제어하는 데 사용할 수 있는 몇 가지 메서드를 제공하는데요. 그 중 키보드를 내리기 위해서는 Keyboard.dismiss() 메서드를 사용하면 됩니다. 키보드 내리기 예제 1 특정 버튼을 클릭했을 때 키보드를 내리는 예제입니다. import React from 'react'; import { View, TextInput, Button, Keyboard } from 'react-native'; const MyComponent = () => { return ( Keyboard.dismiss()} /> ); }; export de..

• format_list_bulleted React
• · 2023. 4. 16.
• textsms

[React Native] iOS 시뮬레이터에서 키보드 안 보일 때 해결방법

현상 React Native로 개발 후 iOS 시뮬레이터를 실행했습니다. 터미널에 별다른 오류 로그가 찍히지 않으나 TextInput 컴포넌트를 클릭하면 키보드가 나타나지 않는 현상이 있었습니다. 해결방법 iOS simulator 안에 있는 Textinput에 focus한 상태로 command(cmd) + K를 입력합니다.

• format_list_bulleted React
• · 2023. 4. 2.
• textsms

[React Native] TextInput 별표 표시 방법

secureTextEntry 일반적으로 React Native에서 TextInput 컴포넌트에 내용을 입력하면 우리가 입력한 내용이 그대로 화면에 나타납니다. 비밀번호나 신용카드 번호와 같은 민감한 정보를 다른 사람의 눈에 띄지 않도록 보호하려는 경우 secureTextEntry를 사용합니다. React Native의 secureTextEntry는 TextInput 컴포넌트와 함께 사용할 수 있는 프로퍼티입니다. secureTextEntry가 true로 설정되어 있으면 TextInput 컴포넌트에 입력된 모든 텍스트가 숨겨지고 점이나 별표로 대체되어 비밀번호와 같은 민감한 정보를 보호할 수 있습니다. secureTextEntry 사용 방법 다음은 React Native에서 secureTextEntry를 ..

• format_list_bulleted React
• · 2023. 4. 2.
• textsms