✨ Flex Box 사용

1. flex를 주지 않아도 이미 flex container이다.

<View style={{ flexDirection: 'row' }}> // 이미 flex container
      <View style={{ width: 200, height: 100, backgroundColor: 'pink' }} />
      <View style={{ width: 100, height: 100, backgroundColor: 'purple' }} />
      <View style={{ width: 100, height: 100, backgroundColor: 'blue' }} />
</View>

2. flex 비율을 이용하여 크기 조절

height, width 사용 ❌

✨ 부모에도 flex 적용 필수

<View style={{ flex: 1 }}>
      <View style={{ flex: 1, backgroundColor: 'pink' }} />
      <View style={{ flex: 2, backgroundColor: 'violet' }} />
      <View style={{ flex: 1, backgroundColor: 'skyblue' }} />
</View>

3. 자동 스크롤 불가능 (cf. 모바일)

💡 ScrollView 사용

4. 스크롤에 스타일 적용

4-1. Content Container Style

scroll view에 기존 style prop 사용 ❌
-> ✨ Content Container Style 사용

<ScrollView horizontal contentContainerStyle={styles.weather}>

4-2. 스크롤 컨테이너에 flex

⚠️ ScrollView 컨테이너에 flex 적용하면 (ex. flex: 3) 스크롤 적용 안됨

5. Dimensions (화면 크기 get)

const WIDTH = Dimensions.get('window').width;
day: {
    width: WIDTH,
    alignItems: 'center',
},

-> scrollview의 화면 가운데 정렬 설정

5-1. pagingEnabled (스크롤 자유도 없애기)

<ScrollView horizontal pagingEnabled contentContainerStyle={styles.weather}>

5-2. showsHorizontalScrollIndicator (스크롤 없애기)

showsHorizontalScrollIndicator={false}