마퀴(스크롤 텍스트)를 예로 들어: Fabric을 통해 React Native가 네이티브 하모니OS 컴포넌트를 호출하고 제어하는 방법

패브릭은 React Native의 새로운 렌더링 시스템으로, 성능과 안정성을 위해 설계되었으며, React Native 앱에 네이티브 컴포넌트를 매끄럽게 통합할 수 있도록 지원합니다. 사용자 정의 네이티브 컴포넌트를 통합할 때, 패브릭은 React Native JS 코드가 네이티브 뷰를 선언, 구성 및 제어하고 네이티브 이벤트도 수신할 수 있도록 합니다. 흐름은 `codegenNativeComponent`를 사용하여 컴포넌트의 props와 이벤트를 선언하고, React Native 화면에서 컴포넌트를 사용하고, HarmonyOS에서 네이티브 컴포넌트를 구현하는 것을 포함합니다. 속성과 이벤트는 패브릭의 codegen/binder 로직을 통해 자동으로 네이티브 코드로 매핑됩니다. 네이티브 이벤트를 발생시킬 수 있으며, 이는 JS에서 콜백으로 수신되고, JS는 런타임에 네이티브 컴포넌트 상태를 제어하는 명령을 보낼 수 있습니다. 코드 walkthrough는 패브릭 컴포넌트를 선언하고, React Native 화면에서 사용하고, HarmonyOS에서 네이티브 컴포넌트를 구현하고, 속성과 이벤트를 바인딩하는 방법을 보여줍니다. 패브릭의 아키텍처는 JS 및 네이티브 뷰 트리를 미러링하는 구조를 사용하여 동기적이고 예측 가능한 UI 업데이트 방법을 제공합니다. 패브릭은 동기 업데이트, 직접 struct 매핑, 타입 안전하고 항상 동기화되는 코드 등 이전 브리지에 비해 여러 가지 이점을 제공합니다. 패브릭 컴포넌트를 작성하려면 `codegenNativeComponent`로 선언하고, 네이티브 컴포넌트를 구현하고, 바인더/글루를 구현하고, JS에서 사용해야 합니다.