[React Native]TextInput 클릭시 화면 줄어들지 않고 스크롤되도록 할때 사용하는 KeyboardAwareScrollView

먼저 npm을 이용해 설치 

>> npm i react-native-keyboard-aware-scroll-view

 

 

 

사용하는 JS 파일 상단에 import 

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

 

실제 return(); 부분에 

 

아래와 같이

KeyboardAwareScrollView 로 감싸고 TextInput을 원하는대로 배치한다 

 <KeyboardAwareScrollView style={styles.page} contentContainerStyle={styles.container} resetScrollToCoords={{ x: 0, y: 0 }} scrollEnabled={false}>
     <View>
     	<TextInput />
     </View>
  </KeyboardAwareScrollView>

 

 

이때 style 은 KeyboardAwareScrollView 에 대한 style 이고

contentContainerStyle 은 KeyboardAwareScrollView 안에 가상의 view 가 하나 있다고 생각하고 적용하면 된다.

 

이때!! 주의할 점은 

contentContainerStyle 에는 flex 값을 넣어주면 안됨 또는 height값을 %로 주면 안된다 

그럼 스크롤이 정삭적으로 동작하지 않는다!!!

 

비율로 쓰고싶다면 아래글 참고

[리액트네이티브] - [react-native] 컴포넌트의 크기를 지정할때 화면비율에 맞게 지정하는 간단한 방법

 

 

 

그리고 이때,

버튼같은게 들어있으면 두번클릭해야작동한다.

(버튼 두번 클릭해야 동작하는 이슈 발생)

한번클릭하면 키보드 없어지고 한번더 클릭해야 작동하는데 

KeyboardAwareScrollView 의 속성에 keyboardShouldPersistTaps="always" 를 추가해주면 문제해결!

이때 KeyboardAwareScrollView안쪽에 ScrollView 가 있다면 거기에 써주어야한다