[ react-native ] width: '100%' 적용되지 않을 때, 너비를 100%로 채우고 싶을 때

css를 만지다 보면 최대 너비로 하고싶을때

 

이상하게 width:100%가 안될때가 있다

난 초보라 왜그런지모른다

 

이럴땐 width를 screen 너비로 해주면 참 좋은데 알아보자

 

 

 

reactnative의 기본 api이다 import해주자

import {Dimensions} from 'react-native';

 

 

 

 

상단에 아무때나 변수를 초기화 해주자

Dimensions.get('window'). 를 이용하면 된다.

const Width = Dimensions.get('window').width;    //스크린 너비 초기화
const Height = Dimensions.get('window').height;  //스크린 높이 초기화

 

 

 

 

 

예시:

예를들어 이런 버튼이 있다 양쪽으로 꽉 차게 하고싶다.

 

 

 

 

 

 

<LinearGradient
          start={{x: 0, y: 0}}
          end={{x: 1, y: 0}}
          colors={['#E94e68', '#eb6c63']}
          style={styles.linearGradient}
          style={{
            display: 'flex',
            flex: 0.1,
            backgroundColor: '#E94e68',
            justifyContent: 'center',
            alignItems: 'center',
            width: Width, <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<요기
                      //width: Dimensions.get('window').width를 직접써줘도 된다
          }}>
          <Text
            style={{
              fontSize: 18,
              fontWeight: 'bold',
              fontFamily: 'Jalnan',
              color: 'white',
            }}>
            메세지 보내기
          </Text>
        </LinearGradient>

 

 

 

다음과 같이나온다