React Native provides two ways to build environments: a complete Native environment and a simple Shahe environment.

System environment

  • Construction method: complete native environment

  • System: macOS

  • Configuration: 4 cores 16GB

Installation process is a long story, due to some network reasons, before installation as far as possible to find some agent software or some domestic available mirror source

Install an environment that supports IOS

The dependencies you must install are Node, Watchman, Xcode, and CocoaPods.

Install Node & Watchman

$brew install Watchman $brew install WatchmanCopy the code
  • After installing Node, it is recommended to set up an NPM image (taobao source) to speed up the process (or use the scientific web tools).
  • Watchman is a tool provided by FaceBook to monitor file system changes (Packager can quickly catch file changes for real-time refresh)

  • Package management tool YARN (Optional)

    Yarn is a tool provided by Facebook to replace NPM and speed up the download of Node modules.

    $ npm install -g yarn
Copy the code

    After the installation, check the version yarn –versioin. If the installation is successful, the version number is printed. After the installation, yarn can be used instead of NPM. Replace NPM install with YARN add a third-party library name.

Install Xcode

Open up the App Store or go to the Apple developer website, download it, open it up, drag it into Application, and it will automatically install an IOS emulator or something,

  • IOS package management tool – Cocoapods

    CocoaPods is a package manager written in Ruby (NPM for iOS). The react Native iOS version uses CocoaPods to manage dependencies.

    $ brew install cocoapods
Copy the code

    After the installation is complete, you can use the following command to view the version:

    $pod --version // 1.10.1Copy the code

Install an environment that supports IOS

The dependencies you must install are Node, JDK, and Android Studio. Now that You have Node and Watchman installed, you don’t need to repeat the installation. You just need to install JDK and Android Studio development tools

Installing the JDK(Java Development Kit)

$ brew install adoptopenjdk/openjdk/adoptopenjdk8
Copy the code

After the installation is complete, you can run the following command to view the version:

$javac -version // javac 1.8.0_292Copy the code

Install the Android Studio

This tool cannot be found in App Store, so it can only be downloaded from the official website. Due to some network reasons in China, the official link may not be opened, but you can visit Download

On the installation screen, select Custom and ensure that the following items are selected:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

Then click “Next” to install the selected component.

If you don’t have the option to install it or you can’t select it, you can go to the next step and select Configure and SDK Manager from the bottom right corner of the Android Studio startup page. Or find it in the “Preferences” menu in Android Studio. The specific path is Appearance & Behavior → System Settings → Android SDK.

Install Android Virtual Device not in SDK Manger, also select Configure in the lower right corner of the startup screen, a drop-down box will appear, select AVD Manager will enter a new interface, and then you can install the corresponding SDK.

Once inside, you can click Create Virtual Device in the lower left corner…

  • Configuring environment Variables

    React Native requires environment variables to know what path your Android SDK is installed on so it can compile properly.

    To do this, add the following command to the shell configuration file. The configuration file is ~/.zshrc if your shell is ZSH, or ~/.bash_profile if you are bash. (You can use the echo $0 command to see which shell you are using.) :

    # If you are not installing the SDK through Android Studio, the path may be different. Export ANDROID_HOME=$HOME/Library/Android/ SDK export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-toolsCopy the code

    TIP

    You can view the actual path to the SDK from the “Preferences” menu in Android Studio. Appearance & Behavior → System Settings → Android SDK

    Note: ~ indicates the user directory, /Users/ your user name /, and files starting with the decimal point are hidden in the Finder and may not exist. You can run the vi ~/. ZSHRC command to create or edit the SHRC file.

    Use the source $HOME/.zshrc command to make the environment variable Settings take effect immediately (otherwise, they won’t take effect until you restart). You can check that this variable is set correctly using echo $ANDROID_HOME.

Create a project

Global installation

You can install the react-native cli tool using NPM I react-native cli -g, and then create the project. I personally prefer to use NPX to create projects (NPX is recommended);

NPX creates a normal project

$ npx react-native init [projectName]
Copy the code

NPX creates the specified version of the project

$ npx react-native init [projectName] --version x.xx.x
Copy the code

NPX creates the project for the specified template

Create a TypeScript project

$ npx react-native init [projectName] --template react-native-template-typescript
Copy the code

This completes the project environment and project creation process