An overview of the

  1. Basic environment construction
  2. Building an Android Environment
  3. Setting up the IOS Environment
  4. Initialize the project

1. Basic environment construction

  • Installation Node. Js

    • Node.js version >=12 (LTS version is recommended)
    • npm config set registry registry.npm.taobao.org

  • Installation of Yarn

    • npm install -g yarn

  • Install React Native scaffolding

    • npm install -g react-native-cli

The above environment can ensure the normal operation of JS code, but it is still necessary to generate THE JS code at both ends of the APP code, so it is necessary to build the corresponding environment of the APP. Windows can only build Android development environment, Mac can build both Android and IOS development environment, which can be found on the official website.

2. Build an Android environment

  1. Install the JDK: The JDK is a suite of Java applications that run on the Java environment
  2. Install Android Studio: An environment that keeps Android running and is also an editor that Android engineers use for code development. The main purpose of installing Android Studio here is to install the Android SDK
  3. Install the Android SDK: Some of the kits needed for Android development
  4. Configuring environment Variables

1. Install the JDK

  • Download JDK (Java SE Development Kit)
    • www.oracle.com/java/techno…
  • The JDK version must be 1.8.
    • JDK versions higher than 1.8 are not currently supported
  • Download requires login (please register your Oracle account first)
  • Installing the JDK (all the way to next)
    • Run the Java -version command to check whether the installation is successful

2. Install Android Studio

  • Download the Android Studio
    • Developer.android.com/studio/inde…
  • Installation (all the way to next)
  • Start the Android Studio
    • After the initial startup, you need to install components (about 2 GB components, and about 8 GB space after installation).
    • Installing components takes a long time and requires patience
  • Create a project

3. Install the Android SDK

  • What
    • The Android SDK is a suite developed for Android
  • Why
    • While Android Studio installs the latest version of the Android SDK by default, it currently requires the Android 10 (Q) SDK to build React Native apps
  • How
    • Open Android Studio and go to the “SDK Manager” menu under Tools.

4. Configure environment variables

  • Configure the ANDROID_HOME environment variable
    • Open Android Studio, go to Tools > SDK Manager, go to Appearance & Behavior -> System Settings -> Android SDK

View the Android SDK installation path:

Configure environment variables:

  • Environment variables associated with ANDROID_HOME
    • %ANDROID_HOME%\platform-tools
    • %ANDROID_HOME%\emulator
    • %ANDROID_HOME%\tools
    • %ANDROID_HOME%\tools\bin

3. Set up the IOS environment

  1. Install Watchman to monitor file changes
  2. Install Xcode: to develop IOS/MAc apps
  3. Install CocoaPods: dependency management tool for IOS/MAC projects, similar to Node.js NPM
  • Watchman
    • brew install watchman
  • Xcode
    • React Native currently requires Xcode 10 or higher. It can be downloaded through the App Store
  • CocoaPods
    • brew install cocoapods

4. Initialize the project

  1. Create a project
  2. Install the VS Code plug-in
  3. A debugging tool
    1. Create a project
    • Initialize the project

    react-native init myproject

    • Into the project

    cd myproject

    • Run the project
      • Android: yarn Android
      • IOS:
        • cd ios && pod install && cd .. /
        • yarn ios
    1. Install the VS Code plug-in
    • ES7 React/Redux/GraphQL/React-Native snippets
      • Quick commands: RNC (React Native Class)
      • Quick commands: React Native Function (RNF)
    1. A debugging tool
    • Simulator debugging
      • An emulator is a virtual mobile phone interface installed on a computer
      • Emulators are typically installed with Android Studio and Xcode
      • When you start the application, the emulator will start together
    • Real machine commissioning
      • Enable the USB debugging mode
      • Connect your computer to your phone first via USB
      • Launch the app and install it on your phone

Simulator debugging:

  • Click on the emulator (to get focus on the emulator)
  • Shortcut key CTRL + M
  • Click the debug
  • Automatically jumps to the browser