[React Native] borderStyle

React Native borderStyle

React Native borderStyle은 solid(default), dotted, dashed 이렇게 단 3개만이 존재합니다.

기본으로 스타일을 명시하지 않으면  solid 스타일이 적용이 됩니다.

 

스타일 속성에 borderWidth를 0이상의 값으로 설정한뒤,

borderStyle 에 원하시는 style을 넣으시면 됩니다.

const styles = StyleSheet.creat({
	button: {
    	width: '100',
        height: 50,
        justifyContent: 'center',
        borderWidth: 2,
        borderRadius: 5,
        borderStyle: 'solid'
        // borderStyle: 'dotted'
        // borderStyle: 'dashed'
    }
})

 

border를 상단이나 하단 등에만 주고 싶은 경우가 생기는데요,

solid 속성만 설정이 가능하면 dotted와 dashed는 지원하지 않습니다.

 

위의 코드에서 borderWidth를 borderTopWidth로 변경해서 실행해보겠습니다.

const styles = StyleSheet.create({
    button: {
        width: '100%',
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        borderTopWidth: 2,
        borderRadius: 5,
        borderStyle: 'dashed'
    }
})

 

그러면 다음과 같이 "Unsupported dashed // dotted border style" warning 메시지가 나오며, border가 없는 상태로 나타납니다.

 

border top only || border bottom only 는 지원하지 않습니다.