리액트 네이티브에서 Canvas 사용하기

리액트 네이티브에서 canvas를 직접 개발하는 방법을 공부하고 있다.

react-native-canvas라는 패키지가 있다고 하는데 이게 개발 가능할정도로 충분히 강력한지는 모르겠다.

HTML5 Canvas로 개발된 컴포넌트를 재활용해야 돼서 그냥 WebView로 연결해서 사용하는게 좋을 수도 있다.

하 근데 다시 보니까 이 react-native-canvas도 WevView 기반으로 HTML5 Canvas를 돌려주는 패키지라고 한다.

사실 생각해보면 Canvas같은거를 크로스 플랫폼으로 변환해주는게 진짜 어려울것 같긴 하다.

다른 리액트 네이티브 개발자 한테 물어보니까 관련해서 웹뷰 아니고 native에서 그래픽 지원하는 기능이 없다고 한다.

간단한 도형정도는 그릴수 있다고 하는데 도형을 선택하고 편집하고 실시간으로 이동하고 캐드처럼 강력한 기능을 제공하려면... 어렵다고 한다.

 

 

근데 이게 모바일 환경에서 사용하기는 부적합하기도 하고(UI 자체가 마우스 기반이라서...) 화면 사이즈 조절도 쉽게 가능해야 하는데 모바일 환경에서 이걸 사용하려고 하면 그냥 캔버스 말고 지도 기반으로 개발하는것이 더 좋을수도 있다고 생각이 든다. 왜냐하면 사용자 위치에 따라서 따라가는 기능같은게 있으면 편할거 같은 화면이기 떄문.

GPS 위치 기반 따라서 이동하기 같은거 하려면.. 지도 안쓰고 직접 만드는게 정말 멍청한 짓이다. 바퀴를 다시 만드는 상황

---

출처

https://www.atomlab.dev/tutorials/react-native-canvas

React Native Canvas - How to use HTML canvas in a React Native app