react-native-draw

react-native-canvas를 사용했더니

  1. 캔버스 위에 텍스트가 있으면 글씨가 써지지 않음
    -> 캔버스 투명화도 불가
  2. 지우개의 크기가 작음

이라는 문제가 있어 라이브러리를 바꿔보기로 하였다.

그래서 고른 라이브러리는 다음과 같다.
https://github.com/BenJeau/react-native-draw

npm install @benjeau/react-native-draw
expo install react-native-svg
npm install @benjeau/react-native-draw-extras

로 기본 라이브러리와 뒤로가기, 지우기 함수가 들어있는 추가 라이브러리도 설치해주었다.

추가 라이브러리 깃허브)
https://github.com/BenJeau/react-native-draw/tree/master/packages/react-native-draw-extras

기본 함수 외에 제공되는 함수 예제 코드)
https://github.com/BenJeau/react-native-draw/blob/master/example/src/screens/ExtrasExample.tsx

최종 코드 )

  • 뒤로가기, 지우기 구현

  • 상단바에 뒤로가기, 지우기, 저장하기 버튼 적용

  • 캔버스에 바뀐 라이브러리 적용

완성된 화면 )

  • 글쓰기 화면

  • 지우기 화면 ( 상단 지우개 버튼 누르면 지우기 모드로 들어감 )

좋은 웹페이지 즐겨찾기