React Native Integration in 58 Car Dealer App: Architecture, Development Process, and Hot‑Update Strategy

The article introduces the 58 Car Dealer (58车商通) SaaS mobile app and explains why the lightweight daily‑task module was chosen as the first RN entry point, highlighting its simple size, fast iteration, and ability to test hot‑update capabilities.

React Native’s core characteristics—"Learn Once, Write Anywhere", native widget support, asynchronous bridge, and touch‑event handling—are described, followed by a candid discussion of its drawbacks such as version upgrade difficulty, list performance limits, and bridge latency.

The overall technical architecture is divided into three parts: a client providing UI components and interaction protocols, a server exposing business APIs and bundle download URLs, and a hot‑update platform that manages bundle distribution, versioning, and rollback.

Entry Component

import { AppRegistry } from "react-native";

import App from "./src/index"; // business entry

AppRegistry.registerComponent("入口名字", () => App);

The RN‑to‑native communication flow is detailed step‑by‑step (JS → OC module registration, MessageQueue handling, callback ID generation, native execution, and callback invocation).

Protocol Design Example

const nativeBridge = NativeModules.CSTRNComponent.CSTRNHandler;

function loadPage({ url, isDestoryBeforePage = 0, jumpParameter, title, ...other }, disappearCallBack = (error, nativeData) => {}, action = "CSTLoadPageRNWeb") {

let params = { url, jumpParameter, isDestoryBeforePage, title, ...other };

const error = checker(arguments, [{ url: "s|r", jumpParameter: "o", isDestoryBeforePage: "n", title: "s" }, "f", "s"], "loadPage");

if (error === "error") { return error; }

let paramToNative = { action, params };

nativeBridge(JSON.stringify(paramToNative), disappearCallBack);

}

Typical protocol payload:

param = { action, params };

// action example: "CSTLoadPageRNWeb"

// params example: { url, jumpParameter, isDestoryBeforePage, title, ... }

UI development follows a local workflow (clone RN seed project, run on iOS simulator or Chrome remote debugger, set breakpoints). The article shows how to start the app, open the remote debugger (http://localhost:8081/debugger‑ui/), and perform step‑by‑step debugging.

Server API Model

{

"respData": {

"h5Url": "",
"business": { "version": "90", "remoteUrl": "https://.../android_business.tgz" },
"resource": { "version": "90", "remoteUrl": "https://.../android_assets.tgz" },
"bundleId": "10021",
"unpacking": true,
"downNow": false
},
"respCode": 0
}
The hot‑update process mirrors web development: the JS bundle is downloaded and reloaded at runtime, avoiding App Store releases. The article outlines the app start‑up flow, bundle download, and the role of the hot‑update platform.
Resource management on the RN platform includes project registration (Git clone, npm install), unique bundle IDs, and automated build pipelines that produce a common bundle (React + React‑Native) and business‑specific bundles to reduce download size.
Split‑Bundle Strategy
// base.js
import React, { Component } from "react";
import {} from "react-native";
By marking core modules in
base.js
, the common bundle is built first, then business bundles are generated, achieving smaller payloads and optional pre‑loading of the common bundle.
The article also records practical pitfalls and their solutions:
Android fetch requests require
Content‑Type: multipart/form‑data
; iOS supports additional types.
POST requests with empty
FormData
crash on Android – add an empty part with blank key/value.
iOS can inject initial props via
RCTRootView
, but Android lacks this capability.
iOS memory leaks after repeated RN module entry – the bridge must be explicitly released.
In conclusion, the RN integration brought significant benefits (fast feature rollout, reduced development cost) while exposing areas for improvement such as list performance, incremental hot‑updates, first‑screen white‑screen mitigation, and native code refactoring. Future work will focus on optimizing these aspects and leveraging the company’s open‑source RN ecosystem.