본문 바로가기

리액트 네이티브

 (28)
리액트 네이티브 터치 이벤트 흐름 이전 포스트 "리액트 네이티브에서 JS와 Java가 통신하는 방법"의 내용을 기반으로 안드로이드에서 발생한 터치 이벤트가 JS로 전송되서 처리되는 과정 을 정리했습니다.목차Java에서 JS로 이벤트 전송1-1. ReactRootView1-2. JSTouchDispatcher  1-2-1. Leaf View 찾기  1-2-2. 리액트 네이티브가 생성한 View 찾기  1-2-3. UIManagerModule로 부터 EventDispatcher 얻어오기  1-2-4. EventDispatcher  1-2-5. Proxy 객체JS에서 Java 이벤트 수신 모듈 등록2-1. RCTEventEmitter2-2. ReactNativeRenderer2-3. 플러그인   2-3-1. 플러그인 등록   2-3-2. Re..
리액트 네이티브에서 JS와 Java가 통신하는 방법 먼저 전체적인 흐름을 그림으로 표현해 봤습니다.파란색: JS → Java빨간색: Java → JS목차JS → Java1-1. Java에서 C++로 Module Registry 전달1-2. C++에서 JS에 네이티브 호출 함수 등록1-3. JS에서 C++의 Module Registry까지 요청Java → JS2-1. C++에서 JS 함수 가져오기2-2. C++에서 Java와 JS 함수 연결2-3. Java에서 JS까지느낀점리액트 네이티브는 인터페이스(C++), 자바스크립트 엔진, JVM 3개 환경이 유기적으로 상호작용하면서 동작합니다.JVM → C++JNI를 사용하여 C++에서 JVM 클래스의 메서드를 구현하고, JVM 객체에선 C++에 의해 구현된 메서드를 호출하여 초기화 또는 필요한 기능을 수행합니다...
RN Perspective Crop - 크롭 사이즈편 Perspective Cropper로 크롭할 영역을 선택하면, 크롭 영역은 대부분 직사각형이 아니라 각도가 제각각인 사각형입니다. (직사각형을 위한 크롭 툴은 따로 선택할 수 있게 해 뒀습니다.) Perspective 크롭을 하면 직사각형으로 변환될 텐데, 이 직사각형의 크기는 어떻게 결정해야 할까요? 의외로 Cropper 컴포넌트 다음으로 많이 고민했던 부분이었습니다. 세로=Max(좌,우), 가로=Max(위,아래)? 예전에 안드로이드 앱 만들 때 공부했던 자바책입니다. 처음엔 기울여서 찍으면 좌우 대각선의 길이가 증가할 것이기 때문에, 단순히 세로=Max(좌,우), 가로=Max(위,아래) 정도로 하면 될 것 같았습니다. 그리고 좌표평면에 있기 때문에, 직각삼각형 공식을 사용하여 각 변의 길이를 구할 수..
RN Perspective Crop - 네이티브편 RN Perspective Crop - OpenCV편에서 만든 WebView는 이미지 처리 연산만 담당할 뿐 사용자에게 보이지 않습니다.하지만 내부의 캔버스는 크기를 가지고 있습니다. 윈도우에서 브라우저 크기를 조절해도 스크롤바만 생기고 내부 컨텐츠 크기는 그대로인 것과 동일한 개념입니다. 이제 아래와 같이 사용자가 크롭할 영역을 선택할 수 있는 컴포넌트인 Perspective Cropper를 만들어보겠습니다. 주요 재료react-native-gesture-handler크기가 없고, 자식 컴포넌트를 터치하고 드래그했을 때, 움직인 거리 정보를 포함한 이벤트를 발생시키는 PanGestureHandler 컴포넌트를 제공해 줍니다. react-native-reanimated리액트 네이티브에서 기본적으로 제공되..
RN Perspective Crop - OpenCV편 Perspective Crop은 원본 이미지에서 선택한 영역(직사각형 아님)을 직사각형으로 잘라주는 자르기 방식입니다. OpenCV라는 이미지 처리 라이브러리를 사용해서 이 기능을 구현할 수 있습니다. OpenCV 공식 홈페이지에서 Perspective Crop뿐만 아니라 해당 라이브러리를 사용한 다양한 이미지 처리 방식과 예제를 확인할 수 있습니다. OpenCV는 다양한 언어로 바인딩되어 배포되어 있습니다. 자바스크립트는 NodeJS용 라이브러리와 브라우저에서 사용할 수 있는 라이브러리(opencv.js)가 배포되어 있습니다. 그리고 리액트 네이티브에는 react-native-opencv3 라이브러리가 있습니다. react-native-opencv3 처음에는 react-native-opencv3를 선택..
리액트 네이티브 튜토리얼 기능 구현3 - Example 1편과 2편에서 만든 Context와 Component를 사용해서 튜토리얼을 표시해 보겠습니다. 실제 동작은 1등 오답노트 앱에서 더 자세히 확인하실 수 있습니다. 먼저 1편에서 만든 TutorialProvider로 앱의 최상단을 감싸줍니다. 그리고 다음과 같이 구멍과 텍스트 정보를 만들어 줍니다. 터치할 때마다 hole_1 ▷ hole_2 ▷ hole_3로 이동하기 위한 정보들입니다. 마지막으로 Settings 스크린에 다음 코드만 추가해 주면 됩니다. 하지만 저는 Settings 스크린에서 튜토리얼이 끝난 후 이용약관 스크린으로 이동시키기 때문에 아래와 같이 구현했습니다. 처음에 firstLaunch에 의해 useEffect가 트리거되지만, Settings 컴포넌트가 실행되기 전에는 firstLaun..
리액트 네이티브 튜토리얼 기능 구현2 - Components 1편에서 만든 TutorialProvider에 사용된 Tutorial 컴포넌트를 만들어 보겠습니다. Tutorial 컴포넌트의 형태입니다. HoleInfo 타입은 1편 마지막 부분을 참조해 주세요. 우선 4개의 훅이 사용됩니다. DescriptionPosition 타입은 1편 마지막 부분을 참조해 주세요. HoleView는 한 번에 여러개의 구멍을 표시할 수 있습니다. 하지만 저는 한 번에 한 개의 구멍이 터치할 때마다 이동하는 UI를 구현하였습니다. 그래서 holes는 항상 요소가 1개인 배열입니다. firstHole는 매개값으로 입력되는 holes에서 첫번째 요소의 x, y 좌표에서 사이즈만 0으로 변경한 더미 값입니다. 처음에 구멍을 표시할 때 점점 커지는 효과를 넣기 위해서 만들었습니다. 마지막에..
리액트 네이티브 튜토리얼 기능 구현1 - Context, Libraries 1등 오답노트 앱을 출시했는데 사용자들이 앱을 다운로드받아도 참여율이 적어서 고민이었습니다. 일단 인터페이스가 생소해서 사용자들이 공감하지 못하는 것인지 의심했습니다. 그래서 아래과 같은 튜토리얼 기능을 구현해 보았습니다. 어떻게 구현할 것인가? 일단 처음에 두 가지 방법을 생각했었습니다. 화면마다 튜토리얼 데이터와 컴포넌트를 관리하는 방법 Context에서 모든 페이지의 튜토리얼 데이터와 컴포넌트를 관리하는 방법 이 중에서 두 번째 방법을 선택했습니다. 1등 오답노트 앱은 단순해 보여도 내부적으로 은근히 많은 화면이 있고, 설명해야 할 중요 기능만 23개였습니다. 화면마다 튜토리얼 데이터와 컴포넌트를 관리한다면 중복되는 코드가 많아질 것 같았습니다. 그리고 탭 네비게이션에 포함되지 않은 화면은 새로 로..

티스토리툴바