[React-native] 검색기능 구현2 (키보드 위 배너 잘림 현상 수정하기 - KeyboardAvoidingView)

InputText에 텍스트 입력을 위해 키보드가 올라오면 배너 영역에 있는 SafeAreaView가 함께 올라와 해결하기 위해 KeyboardAvoidingView 사용했다. 

 

1. KeyboardAvoidingView를 사용하기 위해 import한다

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

 

Platform은 os별로 다르게 적용되는 부분을 위해 함께 추가했다. 

 

2. 키보드가 올라왔을 때  사라져야 하는 부분을 KeyboardAvoidingView 컴포넌트로 감싸준다

return (
  <NativeBaseProvider>
    <NavigationEvents
      onWillFocus={payload => {
        this.focus.current = true;
      }}
      onDidBlur={payload => {
        this.focus.current = false;
      }}
    />
    <KeyboardAvoidingView
      style={{flex: 1}}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={Platform.select({ ios: responsiveHeight(-3), android: responsiveHeight(-3) })}
    >
      <SafeAreaView /> //배너가 들어가는 영역
    </KeyboardAvoidingView>
  </NativeBaseProvider>
);

 

KeyboardVerticalOffset에 다양한 화면에서 똑같이 동작하도록 responsiveHeight를 추가했다

이렇게 수정하니 키보드 올라왔을 때 불필요하게 노출되던 영역이 사라졌다!