JDReact Development Guide for the JD Oil Card Shell Project

JDReact is a deep‑fork of Facebook's ReactNative that integrates Android, iOS, and Web platforms and provides SDK‑level APIs for JD mobile business capabilities; the Oil Card Shell project adopts JDReact for its development.

1. Project Preparation

1.1 Project background – the Oil Card Shell feature is accessed from the JD app’s “Recharge & Payment” entry.

1.2 Environment configuration

Initialize a dev branch for packaging and a trunk branch for daily development; merge trunk into dev before building.

File structure: Navigation.js defines routes and the default page; pages/ holds each page’s code; images/ stores assets; components/ contains reusable UI components.

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.

2. Development Issues

2.1 JDImage loading

Remote image:

<JDImage source={{uri:'http://xxx.jpg'}} style={styles.img0} />

Local image:

<JDImage source={require('./images/xx1.jpg')} style={styles.img1} />

After adding a new local image, restart npm start to avoid the “Unexpected character” error.

2.2 Page navigation

Using resetTo :

this.context.router.reset([
  {routeName:'index', params:{title:'apis'}},
  {routeName:'disCountPage', params:{datas:this.props.discountData}}
]);

To preserve page state, switch to push and popToWithProps :

this.context.router.push({routeName:'B', props:{datas:this.props.discountData}});

Returning:

this.context.router.popToWithProps('A', {trandatas:null});

2.3 Modifying low‑level components

Copy node_modules/@jdreact/Libraries/JDConfirmDialog/index.js and add a textStyle prop to customize the confirm button:

<JDText style={styles.confirmText}>{this.props.confirmText}</JDText>

2.4 JDNetwork usage

Use fetchWithoutHost to call backend APIs; the host is automatically switched between api.m.jd.com (production) and beta-api.m.jd.com (testing) without code changes.

Ensure port 8081 is open in the firewall for the debug server.

2.5 JDText line‑break issue

Wrap clickable red text with JDText instead of JDTouchable and nest it inside a parent JDText to keep the layout inline:

<JDText>
  普通文字
  <JDText onPress={this.handlePress}>可点击文字</JDText>
</JDText>

2.6 Component layering

Combine 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 color value in the top‑level component:

ParentInfo.childContextTypes = {color: React.PropTypes.string};
getChildContext(){ return {color:"red"}; }

Consume it in a button component:

Button.contextTypes = {color: React.PropTypes.string};
<button style={{background:this.context.color}}>子组件</button>

3. Debugging

Shake the device to open the debug menu (reload, remote JS debugging, live/hot reload).

Set “Debug server host & port for device” to the computer’s IP and port 8081.

4. Release Process

Package the plugin and the JD app via the wireless continuous‑integration platform (Android and iOS).

For iOS, install the generated .ipa using iTools4.

After each release, create a new Git branch for the version, merge changes into master , and ensure the CI platform builds from the updated master branch.

Finally, follow the JD front‑end team’s guidelines for image compression (keep the upgrade package < 1 MB) and time‑shift the device clock by 30 minutes after installation to see the new version.