[React_Native] useRef 찍먹2탄 TextInput

ww8007·2021년 8월 26일
0

ReactNative

목록 보기
4/8
post-thumbnail

이번에는 TextInput에서 사용해보자! 😙

  • 어떻게 보면 텍스트 입력창이 안들어가는 앱을 만드는 경우는 없다고 생각이 든다
    ┗ 그러면 배웠던 ref, context를 조합해서 이를 잘 사용하는 방법도 아는게 중요하다!!!

TextInput 컴포넌트에서 useRef 사용하기 🖥

  • TextINput 컴포넌트는 focus 메서드를 제공하며
    ┗ 이 메서드를 호출시 textinput 쪽으로 포커스를 줄 수 있음
  1. TextInputRef 값 얻기
export default function Input() {
  const textInputRef = useRef<TextInput | null>(null)
}
<TextInput ref={textInputRef}/>
  1. TextInput 으로 포커스 이동
const setFocus = () => {
	textInputRef.current?.focus();
}
<Text onPress={setFocus}>foucus</Text>

dismiss() 를 이용한 키보드 강제로 내리기

  • R/N는 키보드와 관련된 프로그래밍이 가능하도록 Keyboard API를 제공한다 😆
import {Keyboard} from 'react-native'
<Text onPress={Keyboard.dimiss}dismiss</Text>

문제점... 키보드가 가려짐 😥

  • 아이폰에서는 TextInput이 키보드를 가려버리는 버그가 발생한다...
    ┠ 그렇기에 리엑트 네이티브는 KeyboardAvoidingView 라는 코어 컴포넌트를 제공하지만
    ┗ scrollView 에서는 사용할 수 없는 크나큰 장점이 존재 한다.

단점인 이유는 화면 스크롤 해서 키보드 포커스를 벗어나는게 좀 더 편하다고 생각하기 때문?


react-native-keyboard-aware-scroll-view 설치 및 사용 🛠

설치
yarn add react-native-keyboard-aware-scroll-view
npm i react-native-keyboard-aware-scroll-view

  • KeyboardAwareScrollView는 scorllToFocusedInput이란 메서드를 제공
    ┠ 이 메서드는 이름처럼 포커스를 가진 TextInput을 수직 방향 스크롤을 통해 항상 화면에 나타나도록 함
    ┗ 이 메서드를 사용해서 ref 속성 값을 알아내는 법을 알아보자!!!

const scrollViewRef = useRef<KeyboardAwareScrollView | null>(null)
<KeyboardAwareScrollView ref={scrollViewRef}/>
  • 그런 다음에 scrollViewRef 값을 사용하여 scrollToFocusedInput 메서드를 호출하는 함수 작성 가능
const scrollToINpu = (reactNode: any) => {
  scrolViewRef.current?.scrollToFocusedInput(reactNode)
}
  • 여기서도 동일하게 autoFocus 함수를 구현 가능하다!!!
import {findNodeHandle} from 'react-native'
import type {NativeSyntheticEvent, TextInputFocusEventData} from 'react-native'

const autoFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => 
	scorllToInput(findNodeHandle(e.target))

정리

이렇게 사용하면 키보드 input 에 따른 더 이상의 가림을 고민하지 않아도 된다.

  • 추가 내용
    요번에 R/N이 버전 업이 되면서 react-native-keyboard-aware-scroll-view 버그가 생겼다.
    버그 회피 방법은 https://velog.io/@ww8007/BugReactNative-respnder.scrollScrollTo-is-no-a-function%ED%95%B4%EA%B2%B0%EB%B2%95-0.65.X 에 기술해 두었다.
profile
Frontend 개발자를 꿈꾸는 대학생 입니다.

0개의 댓글