[RN공부하기] [13]Flexbox Basics

1) 공식문서를 살펴보자.

https://reactnative.dev/docs/flexbox

Layout with Flexbox · React Native

나도 flex박스에 익숙한데 react native에서 레이아웃을 잡을때 flexbox를 활용하는것 같다.

실습으로 공부 하는게 빠르기 때문에

(2) Sandbox.jsx 컴포넌트를 만든뒤, App.js에 Sandbox컴포넌트만 추가해준다! Todo앱은 끝났으므로

//Components/Sandbox.jsx

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

export default function Sandbox() {
    return (
        <View style={styles.container}>
            <Text style={styles.BoxOne}>one</Text>
            <Text style={styles.BoxTwo}>tow</Text>
            <Text style={styles.BoxThree}>three</Text>
            <Text style={styles.BoxFour}>four</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
      flext: 1,
      paddingTop: 40,
      backgroundColor: '#ddd'
    },
    BoxOne : {
      backgroundColor: 'violet',
      padding: 10
    },
    BoxTwo : {
        backgroundColor: 'coral',
        padding: 10
    },
    BoxThree : {
        backgroundColor: 'skyblue',
        padding: 10
    },
    BoxFour : {
        backgroundColor: 'yellow',
        padding: 10
    },

});

//App.js

/* 플랙스 박스 */
import Sandbox from './Components/Sandbox';

return (
        <Sandbox></Sandbox>
    // <TouchableWithoutFeedback onPress= { () => {
    //   Keyboard.dismiss();
    // }}>
    //   <View style={styles.container}>
    //     <Header></Header>
    //     <View style={styles.contents}>
    //       <AddTodo SubmitHandler={SubmitHandler}></AddTodo>
    //       <Contents todos={todos} setTodos={setTodos}></Contents>
    //     </View>
    //   </View>
    // </TouchableWithoutFeedback>

  );

결과화면)

 

여기서 이제 container에 flexDirection속성을 넣어서 이해해보자.

 

• flexDirection : row일때

//Components/Sandbox.jsx

container: {
      flext: 1,
      flexDirection:'row',
      paddingTop: 40,
      backgroundColor: '#ddd'
},

결과)

• flexDirection : colum일때

container: {
      flext: 1,
      flexDirection:'column',
      paddingTop: 40,
      backgroundColor: '#ddd'
},

결과)

• flexDirection : row-reverse일때

container: {
      flext: 1,
      flexDirection:'row-reverse',
      paddingTop: 40,
      backgroundColor: '#ddd'
},

• flexDirection : column-reverse

container: {
      flext: 1,
      flexDirection:'column-reverse',
      paddingTop: 40,
      backgroundColor: '#ddd'
},

 

 

justifyContent속성을 넣어서 이해해보자.

• justifyContent: center

container: {
      flext: 1,
      flexDirection:'row',
      justifyContent:'center',
      paddingTop: 40,
      backgroundColor: '#ddd'
 },

• justifyContent: flex-end

container: {
      flext: 1,
      flexDirection:'row',
      justifyContent:'flex-end',
      paddingTop: 40,
      backgroundColor: '#ddd'
},

• justifyContent: flex-start

container: {
      flext: 1,
      flexDirection:'row',
      justifyContent:'flex-start',
      paddingTop: 40,
      backgroundColor: '#ddd'
},

• justifyContent: space-around

container: {
      flext: 1,
      flexDirection:'row',
      justifyContent:'space-around',
      paddingTop: 40,
      backgroundColor: '#ddd'
},

• justifyContent: space-between

container: {
      flext: 1,
      flexDirection:'row',
      justifyContent:'space-between',
      paddingTop: 40,
      backgroundColor: '#ddd'
},

• justifyContent: space-evenly

container: {
      flext: 1,
      flexDirection:'row',
      justifyContent:'space-evenly',
      paddingTop: 40,
      backgroundColor: '#ddd'
},

alignItems속성을 넣어서 이해해보자.

•  alignItems: center

container: {
      flext: 1,
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:'center',
      paddingTop: 40,
      backgroundColor: '#ddd'
    },
    BoxOne : {
      backgroundColor: 'violet',
      padding: 10
    },
    BoxTwo : {
        backgroundColor: 'coral',
        padding: 20
    },
    BoxThree : {
        backgroundColor: 'skyblue',
        padding: 30
    },
    BoxFour : {
        backgroundColor: 'yellow',
        padding: 40
    },

• alignItems: flex-start

container: {
      flext: 1,
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:'flex-start',
      paddingTop: 40,
      backgroundColor: '#ddd'
    },
    BoxOne : {
      backgroundColor: 'violet',
      padding: 10
    },
    BoxTwo : {
        backgroundColor: 'coral',
        padding: 20
    },
    BoxThree : {
        backgroundColor: 'skyblue',
        padding: 30
    },
    BoxFour : {
        backgroundColor: 'yellow',
        padding: 40
 },

• alignItems: flex-end

container: {
      flext: 1,
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:'flex-end',
      paddingTop: 40,
      backgroundColor: '#ddd'
    },
    BoxOne : {
      backgroundColor: 'violet',
      padding: 10
    },
    BoxTwo : {
        backgroundColor: 'coral',
        padding: 20
    },
    BoxThree : {
        backgroundColor: 'skyblue',
        padding: 30
    },
    BoxFour : {
        backgroundColor: 'yellow',
        padding: 40
   },

flex 속성을 넣어서 이해해보자.

• flex :1  - 1만큼 면적을 가진다는 뜻인것 같다.

container: {
      flex: 1,
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:'flex-end',
      paddingTop: 40,
      backgroundColor: '#ddd'
    },
    BoxOne : {
      backgroundColor: 'violet',
      padding: 10,
      flex:1
    },
    BoxTwo : {
        backgroundColor: 'coral',
        padding: 10,
        flex:2
    },
    BoxThree : {
        backgroundColor: 'skyblue',
        padding: 10,
        flex:1
    },
    BoxFour : {
        backgroundColor: 'yellow',
        padding: 10,
        flex:1
    },

결과)

padding을 똑같은 값을 주면 전체 width의 one이 1/4, tow가 2/4, three 1/4, four 1/4를 가지는걸 알수 있다.

 

 

Todo앱에다가도 한번 적용을 해보자.

<View style={styles.container}>
      <Header></Header>
      <View style={styles.contents}>
         <AddTodo SubmitHandler={SubmitHandler}></AddTodo>
          <Contents todos={todos} setTodos={setTodos}></Contents>
        </View>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange',
  },
  contents : {
    padding: 40,
  }
});

React Native 결과)

앱 전체를 contrainer이고 container는 flex:1을 가지고 있다. 즉, width:100%; height:100%가진다.
웹에서 flex:1이랑 좀 다른듯하네요.

//웹에서
<html>
<body>
	<head>
		<meta name='viewport' content='width=device-width' /> 
		<style>
			body,html{
				padding:0;
				margin:0;
			}
			.container{
				display:flex;
				flex:1;
				background-color : yellow;
			}
		</style>
	</head>
	<div class="container">
		전체 컨테이너
	</div>
</body>
</html>

웹결과)

일반 웹 css에서는 flex:1이 width는 100%가지지만 height는 그렇지 않다.


 

Todo App에서 header를 제외한 contents 컨테이너에 배경색을 줘보면

//App.js

//위 내용 생략

return (
    // <Sandbox></Sandbox>
    <TouchableWithoutFeedback onPress= { () => {
      Keyboard.dismiss();
    }}>
      <View style={styles.container}>
        <Header></Header>
        <View style={styles.contents}>
          <AddTodo SubmitHandler={SubmitHandler}></AddTodo>
          <Contents todos={todos} setTodos={setTodos}></Contents>
        </View>
      </View>
    </TouchableWithoutFeedback>

);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffff',
  },
  contents : {
    padding: 40,
    backgroundColor: 'green',
  }
});

결과)

<View style={styles.contents}>
  ...생략
</View>

이부분인데 contents가 height가 100%만큼 차지 하지 못하고 자식 노드들 만큼만 차지하는걸 알 수 있다.

 

이때 부모와 동일하게 flex : 1을 주면 전체화면을 차지한다.

contents : {
   padding: 40,
   backgroundColor: 'green',
   flex: 1,
}

또한 Item이 넘치게 된 경우

return (
        <View style={styles.Item_Wrap}>
            <FlatList
                keyExtractor={ (item)=> item.key}
                data={todos}
                renderItem={ ( {item} ) => (
                    <TodoItem item={item} pressHandler={pressHandler}></TodoItem>
                )}
            >
            </FlatList>
        </View>
)

const styles = StyleSheet.create({
    Item_Wrap:{
        marginTop : 20,
        flex: 1,
    }
});

flex :1을 주게 되면 부모 컨테이너 contents 컨테이너 만큼만 height를 차지하고 나머지 넘치는 부분은 FlatList로 자동 스크롤로 바뀌는데 웹으론 확인이 안되고 집에가서 앱으로 테스트 해봐야겠다!!!!