There are a lot of information about the principle and implementation of ReactNative development project in the community for reference. This paper mainly records my thoughts and problems in the process of developing a lightweight APP.

Environment set up

Android and ios development environment construction refer to the official website

Project structures,

  1. You can use the React-native CLI or expo-CLI to initialize the project. Expo-cli is recommended. Expo – CLI provides a more comprehensive project template with optional access to the Expo workflow and optional TypeScript.

  2. You are advised to configure an automatic formatting tool to maintain code format consistency depending on whether jEST, ESLint, or Prettier is added.

    • npm install husky lint-staged prettier
    • Add configuration to package.json file
      "husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "src/**/*.{js,jsx,json,md}": [
      "prettier --write"."git add"]."*.{js,jsx,json,md}": [
      "prettier --write"."git add"]}Copy the code

  3. The directory structure

    ├─ Android // Android Project Directory, which contains environment configuration files for developing projects using AndroidStudio ├─ ios // ios Project Directory, ├─ SRC // Project Code ├─ apis // API Request ├─ Assets // Static Resources ├─ Components // Common Component ├─ Constants // Common Constant ├─ Navigation // Navigation Related ├─ pages // Page level Component ├─ Store // Redux Related ├─ utils // Tools └ ─ ─ App. Js / / root component ├ ─ ─ the babelrc / / Babel configuration file, in. Babelrc configuration file, is mainly to the default (presets) and plug-in (plugins) configured, So different translators work on different configuration exercises. Buckconfig // Buck Config file, which is an open source Facebook efficient build system ├─ gitAttributes // git config file, ├─.prettierrc // git config file for ignoring files you don't want to submit to Git ├─.watchmanConfig // Watchman configuration file for monitoring file changes Json // Application Configuration file ├─ index.js // iOS/Android import ├─ package.json // Project Basic Information and Dependency Information ├─ readme.md // README └─ yarn.lock // yarn install this file to record the current NPM packageCopy the code

  4. Code – push hot update

    • For details about the code-push environment deployment and hot update operations, see code-push-CLI

    • For details on how to integrate code-push into code, see React-native code-push

      Automatic detection of update code can take advantage of CodePush’s higher-order components with simple configuration as follows:

      const CodePushOptions = {
  updateDialog: {
    appendReleaseDescription: true,
    descriptionPrefix: ' ',
    mandatoryContinueButtonLabel: 'Update now',
    mandatoryUpdateMessage: ' ',
    optionalIgnoreButtonLabel: 'later',
    optionalInstallButtonLabel: 'download',
    optionalUpdateMessage: ' ',
    title: 'Discover new version',}, } class App extends PureComponent { codePushDownloadDidProgress(progress) { const percent = ((progress.receivedBytes / Progress.totalbytes) * 100).tofixed (2) -0 toast.info (' downloaded:${percent}%`)
  }
  render() {
    return( <AntdProvider> <ReduxProvider store={store}> <AppNavigator ref={ref => NavigationService.setTopLevelNavigator(ref)} />  </ReduxProvider> </AntdProvider> ) } }export default CodePush(CodePushOptions)(App)
Copy the code

  5. Deploy the APP in multiple environments

    APP environments should be differentiated into development, test, and production environments, with different application ICONS, hot update deploymentKey, etc. Refer to multi-Deployment Testing for specific configurations

    • The buildTypes field in the Android key configuration app/build.gradle file
    • Ios configures Xcode according to the document

  6. Run locally

    Download the NPM dependencies and run run-Android or run-ios. Note: When running the ios project for the first time, go to the ios directory and run Pod Install to download the ios dependencies

Depend on the recommended

  • UI library: Native Base is recommended
  • Chart library: Charts generally use WebView + Web chart library to be more flexible
  • Navigation: the react – navigation

Third-party Library Reference