Multi‑Platform Development Strategy: Converting React Native to H5 and Mini‑Programs with react‑native‑web and Remax

Long‑standing differences among APP, H5, and mini‑programs have resulted in divergent tech stacks and high development costs; the product side now demands consistent user experience across all platforms, prompting the need for a unified multi‑platform approach.

We surveyed existing cross‑platform frameworks such as Taro, taro‑next, Remax, Chameleon, alita, KBone, and react‑native‑web, identifying two main strategies: a custom DSL compiled to target code (high runtime performance) and runtime adaptation (better developer experience).

Qunar’s stack is primarily React with a React‑Native (RN) migration for iOS and Android; we required a solution that could directly convert RN to H5 and mini‑programs without introducing a new DSL that would limit RN performance.

For RN → H5 we adopted react‑native‑web , which maps RN components to web equivalents via webpack aliasing, delivering acceptable fidelity and performance.

For RN → mini‑programs we chose Remax , which provides a React renderer for mini‑programs. Remax uses react‑reconciler to collect updates and apply them through the mini‑program’s setData API, similar to the runtime adaptation approach of taro‑next.

The final multi‑platform scheme combines three tactics: (1) use react‑native‑web for H5 conversion, (2) employ a custom RN‑to‑mini‑program component library (qrn‑mirror) built on Remax, and (3) leverage webpack’s platform‑specific bundling to output the appropriate builds.

Dynamic multi‑platform handling is achieved with webpack’s DefinePlugin and tree‑shaking for per‑platform code elimination, and with component‑level polymorphism using file suffixes (e.g., index.web.js vs index.js ) to swap implementations automatically.

The resulting tool enables one‑click conversion of a properly structured RN project into H5 and mini‑program versions, already deployed in low‑price ticket pages, order details, and public order lists, with plans to extend its usage.

Future work will share deeper lessons learned, including third‑party packaging integration, nanachi environment merging, version locking of React/React‑Native, handling of global objects in mini‑programs, animation solutions, performance optimizations, stylesheet strategies, project‑structure constraints, and bundle‑size analysis.