TIL: RN | KeyboardAvoidingView - 221017

Lumpen·2022년 10월 17일
0

TIL

목록 보기
160/244

KeyboardAvoidingView

react native에서 키보드가 올라온 영역의 높이를
자동으로 계산하여 줄어드는 영역을 만들 때 사용
-> 전체 영역에 대한 % 만큼 KeyboardAvoidingView를 적용한 영역에 적용하는 것으로 보인다.. 화면의 특정 높이만 갖는 컴포넌트에서 사용하기에 그렇게 적절하진 않아보임

KeyboardAvoidingView의 높이는 계산 후 줄어들고 남을 영역을 상단으로부터 계산한 값이다

input이 있는 모든 영역에 대해 키보드를 사용할 것이니 템플릿으로 만들던가 App.tsx에서 사용해야겠다
하지만 어떤 것이 좋다고 하기가 좀 애매해다
템플릿으로 만들어 사용하면 조금더 코드가 의미론적으로 맞는 것 같지만
export 해서 쓰게 되면 코드가 여기저기 늘어나는 단점이 있다

또한 KeyboardAvoidingView의 위치에 따라 css 수정이 이뤄져야 할 수도 있다

나는 일단 root router를 감싸도록 구현

<KeyboardAvoidingView
        behavior="padding"
        style={{ width: '100%', height: '100%', backgroundColor: 'white' }}
>
 <View style={{ height: '100%' }}>
 	<View style={{ height: 70 }}>
    	<Input ={{ height: 35 }}/>  
    </View>  
 </View> 
</SafeAreaProvider>

avoidingView와 직접적인 영향을 있는 코드 높이만 적어놓은 코드


자주 쓰는 시뮬레이터와 내 휴대폰의 기종이 분기 처리 되어있다는 것을 잊고 한 쪽만 수정 후 계속 왜 안되는지 고민했다..
앞으로도 자주 발생할 일일지도 모르니 유의하자

profile
떠돌이 생활을 하는. 실업자, 부랑 생활을 하는

0개의 댓글