react native는 기본 flex box 기반이다.

https://reactnative-archive-august-2023.netlify.app/docs/0.65/scrollview

ScrollView · React Native

 

 

주로 공식문서에서 react native 기본을 떼자

 

 

---

1. flex

---

웹에서는 flex direction 기본 방향이 row이지만, react native에서는 기본 방향이 column이다.

핸드폰의 크기는 정말 다양하기 때문에 대부분 width나 height을 설정하지 않고 반응형으로 만들게 된다.

 

react native는 모든 view가 flex container이다.

display:flex가 없다는 의미다.

import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{flex:1}}>
      <View style={{flex:1,backgroundColor:"tomato"}}></View>
      <View style={{flex:1,backgroundColor:"teal"}}></View>
      <View style={{flex:1,backgroundColor:"orange"}}></View>
    </View>
  );
}

이 코드에서 부모 View에 flex가 배당되지 않았다면 아래 자식들의 요소는 하나도 보이지 않을 것이다.

아래 자식들의 flex는 무엇의 1배인지 모르기 때문이다.

 

 

결과

https://nomadcoders.co/react-native-for-beginners/lectures/3123

 

 

---

2. 스크롤

---

overflow가 있다고 해서 스크롤을 할 수 있는 것도 아니다. react-native에서 ScrollView 컴포넌트를 임포트 해서 스크롤을 만들 수 있다.

 

<ScrollView>
          //something
</ScrollView>

 

하지만 이렇게 그냥 ScrollView를 사용해 버리면 내가 원하는 크기로 만들 수 없다. ScrollView는 부모의 컴포넌트에 따라 높이가 정해진다. 따라서 그냥 ScrollView를 써버리면 그 부모 컴포넌트의 넓이, 길이에 따라서 변하게 되어 내가 원하는 모습의 앱을 구현할 수 없다.

 

이를 해결하기 위해서는 ScrollView를 View로 감싸준다.

 

<View style={styles.goalsContainer}>
  <ScrollView>
          //something
  </ScrollView>
</View>

그리고 ScrollView에 줬던 스타일을 ScrollView를 감싸고 있던 View컴포넌트에 적용하면 원하는 모습의 앱을 구현 할 수 있다.

 

 

[예시1. 위 아래로 움직이는 스크롤]

// import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, ScrollView } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      
      <View style={styles.city}>
        <Text style={styles.cityName}>Seoul</Text>
      </View>

      <ScrollView style={styles.weather}>
        
        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>Sunny</Text>
        </View>

        <View style={styles.day}>
          <Text style={styles.temp}>27</Text>
          <Text style={styles.description}>Sunny</Text>
        </View>
      </ScrollView>

      
    </View>
  );
}


const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:"tomato"
  },
  city:{
    flex:1,
    justifyContent:"center",
    alignItems:"center",
  },
  cityName:{
    fontSize:68,
    fontWeight:"500"
  },
  weather:{
    flex:3,
  },
  day:{
    flex:1,
    alignItems:"center",
  },
  temp:{
    marginTop:50,
    fontSize:178,

  },
  description:{
    marginTop:-30,
    fontSize:60,
  }
});

 

결과

https://nomadcoders.co/react-native-for-beginners/lectures/3125

우측에 스크롤이 보인다.

 

 

[예시2. 좌우로 움직이는 스크롤]

 

<ScrollView horizontal style={styles.weather}>
        
  <View style={styles.day}>
    <Text style={styles.temp}>27</Text>
    <Text style={styles.description}>Sunny</Text>
  </View>

  <View style={styles.day}>
    <Text style={styles.temp}>27</Text>
    <Text style={styles.description}>Sunny</Text>
  </View>
</ScrollView>

 

ScrollView props로 horizontal을 붙여주면 된다.

 

 

결과

https://nomadcoders.co/react-native-for-beginners/lectures/3125

 

하지만 horizontal을 쓰면 flex 구조가 무너지게 된다.

그래서 우리는 horizontal 과 함께 contantContainerStyle을 써야한다.

 

ScrollView에는 flex 사이즈를 줄 필요가 없다.

flex 사이즈를 주는 순간 그 사이즈만큼만 움직여서 정상적으로 작동하지 않는다.

 

 

 

---

3. StyleSheet 적용하는 방법

---

import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      
    </View>
  );
}


const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:"tomato"
  }
});

 

StyleSheet.create 부분을 보면 된다.

 

 

 

---

4. dimensions

---

dimensions를 이용하면 화면의 크기를 얻을 수 있다.

 

import {Dimensions } from 'react-native';
const {height, width} = Dimensions.get("window");
console.log(height);

 

const {width:SCREEN_WIDTH} = Dimensions.get("window");

혹은

const SCREEN_WIDTH = Dimension.get("window").width;

이런식으로 :을 써서 대등하게 이름을 바꿀 수도 있다.

 

day:{
    width:SCREEN_WIDTH,
    alignItems:"center",
  }

 

아래 스타일로 width 전역 변수로 넣어줄 수 있다.

 

 

 

---

5. pagingEnable

---

contantContainerStyle은 손가락으로 페이지를 넘기면 한 페이지를 딱 보여주는 것이 아니라 내가 움직이는 화면만큼 멈춰서 보여준다. 그게 빈 공간이라고 할지라도 말이다.. 컨텐츠도 짤린다.

 

하지만 pagingEnable을 사용하면 넘기면, 내가 보고 싶은 다음 페이지를 보여주는 것이다.

컨텐츠도 짤리지 않고, 빈공간도 보이지 않는다.

 

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

 

 

하지만 이런식으로 페이지 표시칸이 보여서 이런 부분을 안보이게 해줘야한다.

 

 

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

 

showHorizontalScrollIndicator을 써주면 된다.

 

 

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

 

혹은 indecatorStyle로 꾸며줄 수 있다.

이 기능은 오직 안드로이드에서만 작동한다.