앱개발 학습. 자주 사용하는 스타일 속성. flex

 

// 앱개발 학습 - 2주차(스파르타코딩클럽)

StyleSheet

• 객체(딕셔너리)를 만드는데, 옷들을 정리해놓은 옷장 역할
• 이 객체에 옷을 사용법대로 생성해서 정리한다음, JSX 엘리먼트에서 사용
• https://reactnative.dev/docs/style#docsNav

Style · React Native

• react native [필요한 스타일] 로 검색해서 찾자

자주 사용하는 스타일 속성

• container - flex, backgroundColor, justifyContent, alignContent

const styles = StyleSheet.create({
  container: {
    //flex: 1은 전체 화면을 가져간다는 뜻입니다
    flex: 1,
    //영역의 배경 색을 결정합니다
    backgroundColor: '#fff',
    //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
    justifyContent:"center",
    alignContent:"center"
  },

• textContainer - margin, padding, borderRadius, borderWidth, borderColor, borderStyle

const styles = StyleSheet.create({
  textContainer: {
    //영역의 바깥 공간 이격을 뜻합니다
    margin:10,
    //영역 안의 컨텐츠 이격 공간을 뜻합니다
    padding: 10,
    //테두리의 구부러짐을 결정합니다.
    borderRadius:10,
    //테두리의 두께를 결정합니다
    borderWidth:2,
    //테두리 색을 결정합니다
    borderColor:"#000",
    //테구리 스타일을 결정합니다. 실선은 solid 입니다
    borderStyle:"dotted",
  },

• textStyle - color, fontSize, fontWeight, textAlign

const styles = StyleSheet.create({
  textStyle: {
    //글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
    color:"red",
    //글자의 크기를 결정합니다
    fontSize:20,
    //글자의 두께를 결정합니다
    fontWeight:"700",
    //가로기준으로 글자의 위치를 결정합니다
    textAlign:"center"
  }
});

flex

• 앱 화면을 구성할때 영역의 레이아웃을 결정하는 속성
• flex는 상대적인 개념, '합'의 개념
• containerOne의 flex가 1, containerTwo의 flex가 2이면 영역 비율이 1:2가 됨

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

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

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

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    backgroundColor:"yellow"
  }
});

• 컨테이너 안에서 다시 flex를 통해 영역을 나눌 수 있음

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

export default function App() {
  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"
  }
});

flexDirection

• 상위컨테이너에서 flexDirection을 지정해주면, 하위컨테이너의 분할 방향은 이를 따른다
  • flexDirection : "row" or "column"
• 컨테이너 분할방향 뿐만 아니라 모든 콘텐츠의 정렬 방식이 이에 따르게 된다

  containerTwo:{
    flex:2,
    flexDirection:"row",
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange"
  }

justifyContect

• 영역 안에 있는 콘텐츠의 방향을 결정
  • flex-start : flex 의 시작부분 부터(flexDirextion의 default값이 column 이기 때문)
  • flex-end : flex의 끝부분 부터
  • center : 가운데

 <View style={styles.innerTwo}>
          <Text>!!컨텐츠!!</Text>
        </View>
        ...

innerTwo: {
    flex:4,
    justifyContent:"flex-start",
    backgroundColor:"orange"
  }

alignItems

• alignItems : 해당 column 내에서 순서(위치)를 정한다고 이해하면 쉬움
  • flex의 첫 column 인지 끝 column 인지를 정하는 justifyContent와 반대

  innerTwo: {
    flex:4,
    backgroundColor:"orange",
    alignItems:"flex-end"
}