ReactNative 리액트 네이티브 : 키보드 컨트롤하기 (IOS, Android 시뮬레이터 키보드)

 

 

1. 시뮬레이터 인풋 창을 눌렀음에도 키보드가 나타나지 않는 경우

 

 

시뮬레이터 활성화 상태에서 위에 I/O > Keyboard > Toggle Software Keyboard를 클릭해주면

인풋 창을 다시 눌렀을 때, 키보드 입력이 활성화된다.

 

이렇게 키보드가 나타날 경우, 안드로이드에선 자동으로 화면이 줄어들지만 IOS는 화면을 그대로 다 가려버린다

react-native의 KeyboardAvoidingView를 이용하여 키보드가 올라올 때 IOS 화면을 가리지 않도록 할 수 있다

 

 

 

2. IOS 키보드가 화면을 가리는 경우 (키보드 활성화 시 화면 줄어들게 하기)

import {KeyboardAvoidingView, Platform} from 'react-native';

<KeyboardAvoidingView
    behavior={Platform.OS === 'ios' && padding}
    style={sytles.avoid}>

    ...
    
</KeyboardAvoidingView>

const styles = StyleSheet.create({
	avoid: {
    	flex: 1,
        
        }
)}

 

화면에서 나타날 부분을 KeyboardAvoidingView로 감싸주고,

behavior에 플랫폼이 ios일 경우에만 padding값을 주면 된다.

 

위에선 Platform.OS를 사용하였는데 Platform.select({ios:padding)}으로도 작성이 가능하다

 

 

 

3. 키보드 닫기

 

텍스트 인풋 창에서 작성 후 done(완료)을 누를 때

onPress의 함수에 Keyboard.dismiss(); 를 작성하면 클릭과 동시에 키보드가 자동으로 닫힌다

 

 

 

4. 엔터키를 이용하여 전송

 

onPress 외에도 onSubmitEditing에 함수를 추가하면 엔터(리턴) 키를 누를 때도 똑같은 함수가 실행된다.

<TextInput
onSubmitEditing={onPress}
/>

 

 

 

Ref.

리액트 네이티브를 다루는 기술 - 김민준