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와 직접적인 영향을 있는 코드 높이만 적어놓은 코드
자주 쓰는 시뮬레이터와 내 휴대폰의 기종이 분기 처리 되어있다는 것을 잊고 한 쪽만 수정 후 계속 왜 안되는지 고민했다..
앞으로도 자주 발생할 일일지도 모르니 유의하자