React Native에서 대각선(Diagonal Line) 그리기

✔️ 필요성

React Native에서 컴포넌트 위에서 도형을 그리고 싶을 때가 있다. 나는 카드 컴포넌트를 사선으로 나누는 대각선(Diagonal Line)을 그리고 싶었다!

 

✔️ 해결

React Native에서 도형을 그릴 때는 react-native-svg 라이브러리를 이용하면 쉽게 그릴 수 있다. <Line/> 태그를 활용해서 양쪽 대각선의 위치를 잡아주면 된다. 

 

px 단위로 위치를 잡을 수도 있는데 난 %를 활용해서 오른쪽 1/3 지점에서 왼쪽 1/3 지점으로 이어지는 대각선을 그렸다

npm install react-native-svg

import React from 'react';
import styled from 'styled-components/native';
import Svg, {Line} from 'react-native-svg';
import Card from '~/components/Card';

const StyledCard = styled(Card)`
  padding-top: 0;
  padding-bottom: 0;
`;

const CardWithDiagonalLine = () => {
  return (
    <StyledCard onPress={onPress}>
      <Svg height="100%" width="100%">
        <Line
          x1="66%"
          y1="0"
          x2="33%"
          y2="100%"
          stroke="rgba(0, 0, 0, 0.2)"
          strokeWidth="1"></Line>
      </Svg>
    </StyledCard>
  );
};

 

 

✔️ 추가

위에서 Card 컴포넌트를 그릴 때 사용했던 코드도 함께 첨부 

import React from 'react';
import Styled from 'styled-components/native';
import {Pressable} from 'react-native';
import {Dimensions} from 'react-native';

const Container = Styled.View<{pressed: boolean; style: React.ReactNode}>`
  width: ${Dimensions.get('window').width * 0.8}px;
  height: 180px;
  margin-top: 20px;
  margin-bottom: 8px;
  padding: 10px;
  border-radius: ${Dimensions.get('window').width * 0.05}px;
  background-color: rgba(255, 255, 255, 1);
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px) saturate(100%) contrast(45%) brightness(130%);
  align-items: center;
  justify-content: center;
  opacity: ${({pressed}) => (pressed ? 0.75 : 1)};
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
`;

interface Props {
  children?: React.ReactNode;
  onPress(): void;
  style?: React.ReactNode;
}

const Card = ({children, onPress, style}: Props) => {
  return (
    <Pressable onPress={onPress}>
      {({pressed}) => (
        <Container pressed={pressed} style={style}>
          {children}
        </Container>
      )}
    </Pressable>
  );
};

export default Card;