[react native] flex box

코드왕·2024년 1월 3일
  1. flex:1의 의미
        <Shadow distance={5} style={{backgroundColor:'white',flexDirection:'row',width:"100%"}} containerStyle={{width:"80%"}}>
          <View style={{flex:1}}><Text style={{fontSize:12,textAlign:'center',alignItems:'center'}}>1</Text></View>
          <View style={{flex:1}}><Text style={{fontSize:12,textAlign:'center'}}>1</Text></View>
          <View style={{flex:1}}><Text style={{fontSize:12,textAlign:'center'}}>1</Text></View>          
        </Shadow>

만약 위와 같이 구성이 되어 있다면 Shadow내에 View를 greedy하게 채워서 3개를 구성하겠다는 의미이다.

2.Shadow 사용법

        <Shadow distance={5} style={{backgroundColor:'white',flexDirection:'row',width:"100%"}} containerStyle={{width:"80%"}}>

위와 같이 구성했을 때 style은 Shadow 외곽, containerStyle을 의미한다. 여기서 style에는 width:100%를 주고, containerStyle에는 조정하고자 하는 사이즈를 넣어주는 것이 좋다.

profile
CODE DIVE!

0개의 댓글