🤓 What I Learned Today

세로방향으로 맞춰 화면을 구성하고 만들었는데 생각해보니 웹과 다르게 앱은 가로 방향으로도 많이 보기도 한다는걸 생각하지 못 했다.

그러면 기기크기에 맞춰 그냥 demensions 를 사용해서 동적화면을 구성하면 되겠다라고 생각해서 생각없이 화면만 바꿨는데 문제가 생기고 말았다..

안드로이드는 괜찮은데 ios 화면에서 가로 방향으로 돌리면 키보드가 화면을 다 가려버리는 것 이었다.

링크로 따로 정리해둔 개념 ➡️ 가로크기로 방향전환하기

---

🚀 Challenges Experienced

ios에서의 문제

세로방향에서는 잘 나오던 키보드가 가로방향으로 바꾸면 화면을 가려 앱을 사용할 수 없게 되었다.🥲

세로방향이고

가로방향으로 바꾸면 내 화면 어디갔담...?

---

🤔 Code Snippets

해결 방법은 KeyboardAvoidingView, ScrollView 사용하기...!

import { KeyboardAvoidingView, ScrollView } from "react-native";
//keyboardAvoidingView는 다른 콘텐츠 또는 입력란을 포함하는
//다른 콘텐츠를 감싸는데 사용할 수 있는 컴포넌트

//키보드가 열릴때마다 입력 요소 및 다른 요소가 화면 위로 올라가 키보드가 열려도 엑세스할 수 있다.

//ScrollView 를 사용하여 스크롤링을 추가할 수 있다.
//공간이 부족할 경우 스크롤링이 되는 사용자 인터페이스가 명확히 정의되어 있다.

function Start()  {
	
	const { width, height } = useWindowDimensions();
	
	const marginTopDistance = height < 380 ? 30 : 100;

	return (
		...생략
	<ScrollView style={styles.screen}>
		<KeyboardAvoidingView style={styles.screen} behavior="position">
			<View style={[styles.rootCantainer, {marginTop: marginTopDistance}]>
		</KeyboardAvoidingView>	
	</ScrollView>
)

}

const styles = StyleSheet.create({
	screen: {
		flex:1,
	}
})