Yiexpress is a cross-platform app for the flow of goods query. Although it has simple functions, it is the first cross-platform app developed by me based on ReactNative produced by Facebook, Learn Once and Write Anywhere.

This article has been authorized wechat public account: Android experience sharing, original release on wechat public account platform.

APK installation address international case, with pictures and facts:

Home page effect picture

Check delivery and logistics details

Send express and scan

About and custom topics

Current modules include:

  • Home page: The top of the home page mainly includes three functional modules of “check express”, “send express” and “scan code”. In the middle, there is a round broadcast advertisement of charity donation, and the bottom part is mainly the real-time logistics information of the latest query express
  • Check express: data with express bird waybill identification, real-time query API, support code recognition, support waybill number identification, select express company query
  • Express delivery: at present, it is mainly a list showing the customer service numbers of major express companies. If you want to call API to place an order, the information interface is too annoying, which needs to be improved later
  • Scanning code: it is mainly to call the camera to quickly identify the waybill number to query the express
  • Custom color theme

Technical Framework:

  • “Buffer “: “^5.0.6”, (Base64 encoding)
  • 16.0.0 – alpha. “react” : “6”,
  • “The react – native” : “0.44.2”,
  • “React-native camera”: “^0.6.0”,(scan)
  • “The react – native – deprecated – custom – components” : “^ 0.1.0 from”,
  • “The react – native – easy – toast” : “^ 1.0.6”,
  • “The react – native – parallax – scroll – view” : “^ 0.19.0”,
  • “The react – native – storage”, “^ 0.2.2”,
  • “React-native swipeout”: “^2.1.1”

The operation steps of the project are as follows:

  • Step 1: NPM install
  • React-native link
  • React-native Run-Android (or run-ios) is compatible with Android/ios, but has not been tried on real ios phones.

Summary: This is my first open source RN from zero to one to write the project, the front has also written meituan APP, but only pay attention to THE UI, did not involve the business code, and this “easy to query” APP, whether UI, business and popular controls are involved.

1. The project structure mainly follows the structure similar to android project, as shown in the following figure. Main features:

  • Packages are mainly divided into common(general control), DAO (data layer), Model (entity class), RES (images and styles and constants), UI (JS pages), util(general tools).
  • The js folder where the page is stored ends in Page – components that need to be reused are extracted into a single class and stored in the Common package.
  • Images, constants, colors, common styles, and other resources are managed by a single entry class, similar to the way resources are managed in Android, which is easier to maintain.
The project structure

2, encountered pit

  • The React-Native version updates quickly. Some controls may exist in earlier versions, but later versions are independent. For example, Starting with version 0.44,Navigator was stripped from the React Native core component library into a separate module called React-Native deprecated- Custom-Components
  • Parse (json.stringify (this.state.tracedatas)) is a deep copy of the listView data source
  • * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  • There are a lot of details, will not be clear, only to really do it to understand

Finally, attach the download address and source code Github source installation address

More exciting articles please pay attention to the wechat public number “Android experience sharing “: here will be a long-term experience for you to share Android master, Chinese and foreign open source projects, source code analysis, framework design and Android good article recommendation!

Scan and add me