앱개발 2-2주차

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

export default function App() {
return (

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

  </View>
</View>

);
}

const styles = StyleSheet.create({
container: {
flex:1
},
// 컨테이너 1,2 를 포함하는 컨테이너 부모
여기서 flex : 1 은 전체 화면을 뜻함
containerOne: {
flex:1,
backgroundColor:"red"
},
containerTwo:{
flex:2,
backgroundColor:"yellow"
}
});
// 원,투에서의 flex는 부모의 부분을 1:2의 비율로 가져갔음.을 의미
1-2. flex 예시 두번째
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
return (

// 다른 컨테이너들을 포함하는 틀

  </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"
}
});
2. flexDirection
=영역을 나누는 방향 (좌우로 나눌지, 상하로 나눌지)
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
return (

  </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,
flexDirection:"row",
// row = 부모영역 안에 있는 자식(inner)들을 좌우로 나누겠다.
column = 상하로 나눔 <사실 기본값이라서 상하로 나눌 때 flexDirection 쓰지 않아도 저절로 나뉨>
backgroundColor:"yellow"
},
innerOne: {
flex:1,
backgroundColor:"blue"
},
innerTwo: {
flex:4,
backgroundColor:"orange"
}
});
3. justifyContent = 컨텐츠를 어디에 두냐를 결정
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
return (

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

  </View>
</View>

);
}

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,
justifyContent:"flex-start",
//"flex-end"(하,우),"flex-start"(상,좌),"center" 컨텐트에서 자주쓰이는 값.
//현재 flexDirection : "column" 기본값 상하
//좌우로 영역을 나누고 싶을 때는 "row" 사용, 이 경우 flex-end = 우 flex=start = 좌
backgroundColor:"orange"

});
4. alignItems = flexDirection과 반대 방향으로 컨텐츠를 둠
flexDirection = "row"
alignItems = "flex-start"
//좌우로 영역을 나눴지만 컨텐츠는 상하로 움직임
영역에서 특정부분만 방향을 바꾸고 싶을 때 요긴하게 사용됨

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

export default function App() {
return (

  </View>
  <View style={styles.containerTwo}>
    <View style={styles.innerOne}>
     
    </View>
    <View style={styles.innerTwo}>
      <View style={styles.content}></View>
    </View>

  </View>
</View>

);
}

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",
alignItems:"flex-end"
},
content: {
width:50,
height:50,
backgroundColor:"#000"
}
});