[React Native] border를 이용해서 구분선 만들기

container border를 이용해서 간단하게 구분선 만들기

//구분선을 만들 js 파일
<View style={Styles.line}/>

const Styles = StyleSheet.create({
line: {
      flex: 17, 
      borderBottomWidth: 1,
      width: "100%",
      borderBottomColor: '#E1E2E4',
    },
});

이렇게 하면 container 아래에 구분선이 생긴다.

쨘~

왼쪽에 하고 싶으면 borderLeftWidth, 오른쪽은 borderRigthWidth, 위쪽은 borderTopWidth를 쓰면 된다.

참고로 내 구분선은 container 안에 있는 container의 border를 이용한 구분선이라 왼쪽과 오른쪽에 여백이 있다.

 

그런데 이렇게 하면 요소 사이에 구분선을 만들고 싶을 때, 길이에 문제가 생긴다.

즉, 아래와 같이 구분선을 더 짧게 하고 싶은데 문제가 생긴다.

나는 더 짧은 구분선을 원하는데...

 

해결하면 아래에 다른 방법도 추가하겠다.

 

RN에도 tailwind 비슷한 라이브러리 있는 것 같은데 그거 쓰면 divide-x 속성 사용해도 될 듯 하다.