textinput

useRef란? useRef는 함수 컴포넌트에서 컴포넌트의 래퍼런스를 선택할 수 있게 하는 Hook다. 간단히 선택자라고 생각하면 될 것 같다. TextInput 포커스 하기 아래는 제목을 입력하고 Enter를 누르면 하단 내용으로 포커스를 이동시키는 예제 코드다. import React, {useRef} from "react"; import { View, StyleSheet, TextInput } from "react-native"; function WriteEditor({title, body, onChangeTitle, onChangeBody}) { const bodyRef = useRef(); return ( { bodyRef.current.focus() }}/> ) } ... 이렇게 ref를 생성..

키보드에서 Enter(return)를 눌렀을 때 onSubmitEditing 속성으로 함수를 호출할 수 있다. TextInput에 returnKeyType 속성은 키보드 완료 부분이 설정한 문자열로 보이게 설정할 수 있다. const onPress = () => { // .. 실행할 함수 } 위 코드에선 done으로 설정했는데 iOS 한국어 키보드를 켜보면 "완료"로 번역되어 나온다. 안드로이드에서는 체크 아이콘으로 설정되어있어서 설정할 필요는 없다. returnKyeType 속성은 상황에 따라 다음과 같은 값들을 지정할 수 있다. 플랫폼 공통 done : 완료 go : 이동 next : 다음 search : 검색 send : 보내기 iOS 전용 default : 기본 emergency-call : 긴급..

사용자 입력값 받기 리액트 네이티브에서 사용자의 키보드 입력을 받아낼때는 TextInput 컴포넌트를 사용한다. import React from 'react'; import {View, StyleSheet, TextInput} from 'react-native'; function AddTodo() { return ( ); } const styles = StyleSheet.create({ container: { height: 64, paddingHorizontal: 16, // 좌우측 패딩 borderColor: '#bdbdbd', borderTopWidth: 1, borderBottomWidth: 1, justifyContent: 'center', }, input: { fontSize: 16, paddi..