Styles

StyleSheet기능을 사용하여 태그에 스타일을 준다.

이 기능은 결국 객체를 하나 만들고 JSX 엘리먼트에서 사용한다.

사용할때는 모든 태그에 공통적으로 있는 style 속성에 객체 키값을 부여하여 적용한다.

---

padding border margin

-스타일 공식 문서
https://reactnative.dev/docs/style#docsNav
https://reactnative.dev/docs/layout-props

---

Flex

flex

상대적 flex는 위치한 곳의 영역을 같은 레벨의 flex 합 비율대로 가져감

return (
    <View style={styles.container}>
      <View style={styles.containerOne}>
      
      </View>
      <View style={styles.containerTwo}>
        <View style={styles.innerOne}>

        </View>
        <View style={styles.innerTwo}>

        </View>

      </View>
    </View>
  );
  
const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange"
  }
});

**
containerOne = 1

containerTwo = 2
innerOne = 1
innerTwo = 4

containerOne과 Two로 1:2비율로 나눠진후
2비율 = 전체 화면의 2/3을 innerOne, Two가 1:4로 나눠 가진다.
**

flexDirection

자리 잡은 영역의 방향
기본 값은 column이며 row(가로)와 column(세로) 설정 가능함

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    flexDirection:"row",
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange"
  }
});

justifyContent

flexDirection과 동일한 방향으로 정렬하는 속성

flexDirection : column에서 justifyContent는 상하정렬
flexDirection: row에서 justifyContent는 좌우정렬

alignItems

flexDirection과 수직 방향으로 정렬하는 속성

flexDirection : column에서 alignItems는 좌우정렬
flexDirection: row에서 alignItems는 상하정렬