Comprehensive JDReact Development Guide: Project Setup, Environment, Common Pitfalls and Best Practices

The author explains how JDReact differs from standard React Native: JDReact apps run inside the JD app, making the launch process more complex. After obtaining a JDReact Git repository from the JDReact team, clone it locally, run npm install (or yarn install on Windows to avoid errno 3221225477 ), and start the project with the command found in package.json (usually npm start ).

JDReact uses the private JD npm registry ( http://registry.m.jd.com/ ). It is recommended to manage the registry with nrm . For Windows developers, using yarn install can bypass npm bugs.

To debug, run npm start debug which opens a QR‑code screen. Ensure the development machine and the test phone are on the same network segment, then scan the QR code. If the app shows "Could not connect to development server", open the Dev Settings on the phone, set the Debug server host & port for device to the IP shown in the QR‑code, and reload.

Common Windows issues : npm start or npm run web-start may fail. Fix by cleaning the cache ( yarn clean cache ), removing node_modules ( rm -rf node_modules ), and reinstalling dependencies with yarn install or npm install .

Essential packages include React, PropTypes, core JDReact components ( View , StyleSheet , Platform ) and JDReact UI components ( JDImage , JDJumping , JDText , JDDevice , JDTouchableWithoutFeedback ) imported from '@jdreact/jdreact-core-lib' .

Styling guidelines : use StyleSheet and JDDevice.getRpx() for responsive dimensions; for sub‑pixel values use JDDevice.getDpx() . All components default to position: 'relative' , so absolute positioning requires explicit position: 'absolute' . Avoid applying layout styles to Text/JDText components—only typographic styles are supported.

Routing is handled by JDRouter . Example setup: import { JDRouter } from '@jdreact/jdreact-core-lib'; const { Router, Route } = JDRouter; export default class JDReactHello extends React.Component { render() { return ( ); } } In a component, declare static contextTypes = { router: PropTypes.object }; and navigate with this.context.router.toBcomp({}) . Use a constant ROUTES object instead of hard‑coded strings.

Network requests should use the JD‑provided JDNetwork SDK rather than fetch or axios , because JD clients require all traffic to go through JD’s gateway and expect a code: 0 field in the response.

Animation advice: prefer GIFs over custom animations when possible, as JDReact animations can block parent animations on Android.

Dialog handling : place global dialogs at the root component; otherwise, on H5 the fixed positioning may be confined by a transformed parent.

Third‑party components should be split into platform‑specific files ( Component.android.js , Component.ios.js , Component.web.js ) and guarded with Platform.OS checks.

FlatList scrolling issue: when the list height is smaller than its container, the JDScrollView loading indicator leaks. Solution: wrap FlatList with a custom renderScrollComponent that uses JDScrollView and set contentContainerStyle={{ minHeight: this.state.tabContentHeight }} . Compute the container height using a helper component that measures its own height via onLayout and passes the value back: <ScrollHackWrap getAsyncHeight={(h) => this.setState({ tabContentHeight: h })}> <FlatList renderScrollComponent={(props) => <JDScrollView {...props} />} contentContainerStyle={{ minHeight: this.state.tabContentHeight }} /> </ScrollHackWrap> The ScrollHackWrap component captures its height with onLayout and calls props.getAsyncHeight(height) .

H5 conversion tips: fix display: flex on inline elements by forcing display: block , replace unsupported justifyContent: 'space-around' with 'space-between' , and add missing styles via contentContainerStyle . For UC browser, these adjustments resolve most layout issues.

Login handling : JD has four login modes (APP, H5, PC, WeChat/QQ). In practice, use only H5 login; WeChat/QQ will fall back to H5, and mixing login states can cause confusing cookie‑based authentication.

Navigation bar duplication : when a custom header is rendered inside JD’s WebView, a second native JD header appears. Detect JD’s WebView via Platform.OS === 'web' && uaType() === 'jdapp' and hide the custom header accordingly.

The article concludes with a brief note that compilation and packaging follow JDReact’s official documentation and invites readers to share their own JDReact challenges.