SafeAreaView, ScrollView

1. SafeAreaView

기존 View와 다르게 SafeAreaView는 Device의 안전한 영역을 구별하는 Component로 아이폰의 노치 디자인과 같은 화면의 물리적 한계를 반영 할 수 있다.

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Hello World</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

2. ScrollView

웹에서는 스크롤이 자동으로 설정되지만 앱에서는 그렇지 않다. 그렇기 떄문에 화면이 넘어가면 스크롤이 생기게 해주는 ScrollView가 존재한다.

ScrollView는 렌더를 한번에 처리하기 떄문에 주의해서 써야한다.

ScrollView로 인해 Hello World-11를 스크롤하여 볼 수 있다.

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.test}>Hello World-1</Text>
      <Text style={styles.test}>Hello World-2</Text>
      <Text style={styles.test}>Hello World-3</Text>
      <Text style={styles.test}>Hello World-4</Text>
      <Text style={styles.test}>Hello World-5</Text>
      <Text style={styles.test}>Hello World-6</Text>
      <Text style={styles.test}>Hello World-7</Text>
      <Text style={styles.test}>Hello World-8</Text>
      <Text style={styles.test}>Hello World-9</Text>
      <Text style={styles.test}>Hello World-10</Text>
      <Text style={styles.test}>Hello World-11</Text>    
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#B5CCD4',
  },
  test: {
    marginLeft: 20,
    fontSize: 55,
  }, 
});