Cross‑Platform Rendering of Qunar Low‑Code Platform on React Native: Architecture, Code Transformation, and Runtime Integration

Qunar's low‑code platform has built thousands of activity pages across mini‑programs, touch and app, based on the Shark framework, a React‑like library offering cross‑platform rendering and on‑demand loading.

Current issue: on the APP side the platform renders pages via H5 inside a WebView, causing long white‑screen times. To improve performance, the team explored replacing H5 with React Native (RN) while preserving the platform's visual‑configuration capabilities.

Feasibility study compared Shark components (JS + SCSS) with RN components, highlighting differences in layout naming, tag types, attribute handling, and nesting. Manual modifications proved that Shark code could compile and run in RN, suggesting a systematic conversion approach.

The solution involves a Babel‑based transformer (shark‑cli) that automatically converts Shark source files to RN‑compatible code. The transformer handles tag and attribute mapping, import rewriting, and flattening of nested SCSS layouts, using a stack‑based layout hierarchy to resolve nesting.

Runtime integration wraps the transformed code in a container component that communicates with the low‑code platform, provides caching, dynamic loading, and Shark abilities (message, request, jump, logger, etc.), enabling seamless execution of platform‑configured pages on mobile.

Performance measurements show that the new RN rendering reduces time‑to‑interactive (TTI) to under 2 seconds for 90 % and 50 % of pages, meeting the original performance goals.

Future work includes exposing more configuration options to developers, expanding the solution to additional business lines, and promoting the cross‑platform capability across the broader low‑code platform ecosystem.