ReactNative-FlexBox

📌 ReactNative에서 flex 는

ReactNative 를 사용하여 화면을 구성할 때, web 과는 조금 다른 부분이 있다.

flex 를 사용하여 모바일 화면 안에서 얼마만큼을 사용 할지 비율로써 조정이 가능하다는 것이다.

예를 들어, App 화면을 정확히 반반 나누고 싶다는 가정을 해보면,

const App = () => {
	return(
    	<View style={styles.Wrapper}>
      		<View style={styles.Container01}></View>
      		<View style={styles.Container02}></View>
      	</View>
    )
  	const styles = styleSheet.create({
    	Wrapper: {
        	flex: 1
        },
        Container01: {
          flex: 1
        },
      	Container02: {
          flex: 1,
          backgroundColor: 'red'
        },
    })
}

위의 결과물에 대한 화면은 아래와 같다.

❗️ 전체를 감싸는 Wrapper 라는 녀석은 화면전체(flex:1) 를 사용하고 있고,
자식요소로 들어간 Container01 와 Container02 는 부모요소를 1 : 1 비율로 차지하게 되는것이다.

이를 활용하면, 이렇게도 만들 수 있다

const App = () => {
  return (
    <>
    <View style={styles.Container}> 
    </View>

    <View style={styles.container2}>
      <View style={styles.button01}>
        <Text style={styles.menuFont}>Menu01</Text>
      </View>
      <View style={styles.button01}><Text>Menu02</Text></View>
      <View style={styles.button01}><Text>Menu03</Text></View>
      <View style={styles.button01}><Text>Menu04</Text></View>
    </View>
    </>
  )
}
const styles = StyleSheet.create({
  Container: {
    flex: 1,
    alignItems: 'center',
    justifyContent:'center',
  },
  container2: {
    flex: 0.1,
    flexDirection: 'row',
    backgroundColor: 'red',
    alignItems: 'center',
    justifyContent:'space-around',
  },
  button01: {
    width: '25%',
    display: 'flex',
    height: '100%',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
  menuFont:{
    fontSize: 12,
  }
})
export default App;