Dimensions
Android의 경우 'screen'은 상태 표시줄을 포함한 너비와 높이이고 'window는 상태표시줄을 제외한 너비와 높이라서 UI가 실제로 표시되는 화면.
값을 하드 코딩하는 것은 좋은 방법은 아니다.
앱이 어떤 크기의 화면에서 실행될 지 미리 알 수 없기 때문.
->Dimensions 활용.
width: '50%',
height: '50%',
둘다 50%여도 각자 다른 값의 50%일 수 있다.
->Dimensions API사용.
const deviceWidth = Dimensions.get("window").width;
스타일시트 속성에서
width: deviceWidth < 380 ? 150 : 300,
useWindwoDimension를 이용하면 동적인 Dimensions가 가능하다.(세로, 가로화면 전환시에 유용)
KeyboardAvoidingView
KeyboardAvoidingView는 React Native에서 제공하는 컴포넌트 중 하나로, 키보드가 화면에 나타날 때 자동으로 키보드를 피하도록 도와주는 컴포넌트입니다.
일반적으로 키보드가 화면에 나타날 때, 키보드가 컴포넌트의 일부를 가리거나 화면 레이아웃을 망칠 수 있습니다. 이러한 문제를 해결하기 위해 KeyboardAvoidingView는 자식 컴포넌트를 키보드가 나타날 때 알맞게 조정합니다. 예를 들어 키보드가 나타날 때 입력 필드를 키보드 위에 위치시켜 가려지지 않도록 보장합니다.
KeyboardAvoidingView 컴포넌트는 다음과 같은 속성(props)을 사용할 수 있습니다:
behavior: 키보드가 나타날 때 컴포넌트를 어떻게 조정할지를 지정합니다. "height", "position", "padding" 중 하나를 선택할 수 있습니다.
keyboardVerticalOffset: 키보드와 컴포넌트 간의 수직 오프셋을 지정합니다. 양수 또는 음수 값을 사용할 수 있습니다.
KeyboardAvoidingView는 주로 폼 입력 화면이나 채팅 앱과 같이 키보드 입력이 필요한 화면에서 사용됩니다. 키보드와 관련된 레이아웃 이슈를 자동으로 처리해주므로 사용자 경험을 향상시키는 데 도움이 됩니다.
KeyboardAvoidingView 컴포넌트의 behavior 속성은 키보드가 나타날 때 컴포넌트의 동작 방식을 지정하는 데 사용됩니다. behavior 속성에는 세 가지 가능한 값이 있습니다:
behavior="height": 이 옵션을 선택하면 키보드가 나타날 때 컴포넌트의 높이가 조정됩니다. 키보드가 컴포넌트를 가리지 않도록 컴포넌트의 높이가 줄어듭니다. 주로 기본값으로 사용되며, 대부분의 경우에 적합합니다.
behavior="position": 이 옵션을 선택하면 키보드가 나타날 때 컴포넌트가 키보드 위에 겹치지 않도록 컴포넌트의 위치가 조정됩니다. 컴포넌트의 위치가 키보드 높이만큼 올라가게 되어 키보드가 컴포넌트를 가리지 않습니다.
behavior="padding": 이 옵션을 선택하면 키보드가 나타날 때 컴포넌트 주위에 패딩이 추가됩니다. 패딩은 키보드의 높이만큼 확보되어 컴포넌트가 키보드에 가려지지 않도록 합니다. 컴포넌트의 크기는 변경되지 않고, 키보드가 패딩 영역을 차지하게 됩니다.
behavior 속성은 특정 상황과 UI 요구에 따라 선택됩니다. 각각의 동작 방식은 다른 상황에 적합할 수 있으므로, 원하는 동작 방식을 선택하여 키보드와 관련된 레이아웃 이슈를 처리할 수 있습니다.
Title.android.js
Title.ios.js
로 안드로이드, ios 각각 파일을 만들수 있음.
임포트는 Title만 하면 됨.
