View

• 동작은 HTML의 div와 동일하다.
• 모든 View는 기본적으로 Flex Container이다. (display : flex 속성이 필요없다.)
• Flex Direction 의 기본값은 Column이다.
  

컨테이너 View에 아무 속성도 주지 않았을 때

flexDirection : row 속성으로 옆으로 정렬된 모습

• 모바일 스크린의 크기가 다양하기 때문에 어느 스크린에서도 동일한 레이아웃을 보여주기 위해 width, height는 % 속성을 사용하도록 하고, flex size 속성을 사용하거나 둘을 혼용해서 사용할 수도 있다.
  

View Container 내부의 4개의 View가 전체 영역을 height : 20%, 10% 만큼 2개의  
View가 차지하고 남은 70%의 영역을 flex size 1:1 비율로 나머지 View 2개가 차지한다.
또는 flex size를 2 : 3.5 : 3.5 : 1로 해도 된다.

ScrollView

Web에서는 Container 내부의 컴포넌트가 Container의 height를 초과했을 때, 자동으로 스크롤이 생겨 하단의 컴포넌트들도 확인이 가능했다. 하지만 Native 에서는 그 당연하게 여겼던 스크롤 기능마저도 컴포넌트로 import 해서 사용 해야 한다.

View를 사용하면 내부 컴포넌트가 여러개일 때 스크롤이 생기지않고, View의 크기 안에서 자식 컴포넌트 flex 비율에 따라 
영역을 차지하면서 view가 제대로 나타나지않는다.

ScrollView 컴포넌트를 이용하면 ScrollView 영역인 하단 부분만 스크롤이 가능해진다.

ScrollView 더 알아보기

• props
  - contentContainerStyle : ScrollView이 경우 style을 지정해주려면 해당 속성을 이용해야한다.
  - horizontal : 좌우 스크롤로 변경
  - pagingEnable : true인 경우 스크롤할 때 스크롤이 각 아이템의 배수 크기에서 멈춘다.
  - showsHorizontalScrollIndicator : false인 경우 가로 scroll 표시기를 숨긴다.

이외에도 ScrollView만 해도 엄청나게 많은 props가 존재한다.

Dimensions

현재 스크린의 width, height를 가져올 수 있는 react-native의 API

import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

또는

const {width : SCREEN_WIDTH} = Dimensions.get('window')
console.log(SCREEN_WIDTH) // 현재 스크린 너비

ex)

import React, { useState, useEffect } from "react";
import { View, StyleSheet, Text, Dimensions } from "react-native";

const window = Dimensions.get("window");
const screen = Dimensions.get("screen");

const App = () => {
  const [dimensions, setDimensions] = useState({ window, screen });

  useEffect(() => {
    const subscription = Dimensions.addEventListener(
      "change",
      ({ window, screen }) => {
        setDimensions({ window, screen });
      }
    );
    return () => subscription?.remove();
  });

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Window Dimensions</Text>
      {Object.entries(dimensions.window).map(([key, value]) => (
        <Text>{key} - {value}</Text>
      ))}
      <Text style={styles.header}>Screen Dimensions</Text>
      {Object.entries(dimensions.screen).map(([key, value]) => (
        <Text>{key} - {value}</Text>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  header: {
    fontSize: 16,
    marginVertical: 10
  }
});

export default App;