JDReact Development Guide: Project Setup, Build, Debugging, and Common Issues

JDReact is a deep‑fork of Facebook's ReactNative framework that integrates Android, iOS, and Web platforms and offers SDK‑level APIs for JD mobile business capabilities; the oil‑card recharge project adopts JDReact for development.

1. Project preparation

1.1 Project background – the oil‑card feature is accessed via the JD app’s "Recharge & Payment" entry.

1.2 Environment configuration – a dev branch is used for final packaging while development occurs on a trunk branch. The file structure includes Navigation.js for routing, pages/ for page code, images/ for assets, and components/ for reusable UI.

Install dependencies and run npm start . If a .babel.json permission warning appears, set SYSTEM permissions to "Allow" and retry.

Install the Babel Snippets plugin in Sublime to enable proper JSX highlighting.

1.3 Build on the wireless continuous integration platform

For Android, select "One‑click build – JDReact", choose the plugin name, platform "android", and the dev branch, then start the build. After JDReact is built, build the JD app by selecting the JD Mall, platform "android", and the appropriate debug or release version.

For iOS, the process is similar but uses the iOS platform; the debug version may crash, so the releaseP version is used for testing.

2. Common development problems

2.1 JDImage loading – use <JDImage source={{uri:'http://xxx.jpg'}} style={styles.img0} /> for network images and <JDImage source={require('./images/xx1.jpg')} style={styles.img1} /> for local assets.

2.2 Routing – reset to a route with parameters using this.context.router.reset([{ routeName: 'index', params: { title: 'apis' } }]) . To preserve page state, use push and popToWithProps instead of resetTo .

2.3 Modifying base components – copy node_modules/@jdreact/Libraries/JDConfirmDialog/index.js , then add a textStyle prop to JDText elements to customize button appearance.

2.4 JDNetwork usage – the fetchWithoutHost API automatically switches between production ( api.m.jd.com ) and test ( beta-api.m.jd.com ) hosts without code changes.

2.5 JDText line‑break issue – wrap clickable red text in <JDText> instead of <JDTouchable> and nest it inside a parent <JDText> to keep the layout on a single line.

2.6 Component layering – merge the "Select Value" component into the "Phone Input" component so that the history list (absolutely positioned) stays above the selector on both Android and iOS.

2.7 Context usage – define a top‑level context with childContextTypes = { color: React.PropTypes.string } , implement getChildContext() to return { color: "red" } , and access it in child components via this.context.color or in a button style with style={{ background: this.context.color }} .

3. Debugging

Shake the device in debug mode to access options such as manual reload, remote JS debugging, live reload, hot reload, and setting the debug server host & port.

4. Release process

Compress images to keep the upgrade package under 1 MB. JDReact team uploads the package, backend deploys H5 pages, and QA installs the Android and iOS builds from the CI platform. Adjust the device time by 30 minutes (or a day for overnight releases) to see the new version.

Maintain separate dev , master , and release branches in Git; after each client upgrade, create a new version branch, fix issues if needed, and rebuild the master branch to ensure future releases include the latest code.