preface

As early as in 2017, when I tried to use RN for the first time, it took me one day to configure the development environment. As a result, MY first impression of RN was not very good, and I ran away after finishing Hello World. Now after three years, I decided to learn RN again. This time, it was much better. It took two days to configure the development environment.

The overall impression to me is that when you decide to learn it, it’s best to keep RN configuration related environments up to date so that there are fewer problems.

The environment that

  • Mac: Catalina 10.15.5
  • The React Native: 0.62.2
  • Xcode: 11.5
  • Android Studio: 4.0
  • Node: 12.9.1
  • Java: 14.0.1
  • Cocoapods: 1.9.1

All the above are basically the latest version (Node is not). If one version is inconsistent with the above version, RN may not run. For example, running RN 0.4x.x or 0.5x.x in the current environment is not going to work.

Software installation

Before setting NRM, make sure to make a copy of the. NPMRC file to avoid configuration loss
npx nrm use taobao Use the default NPM source

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" # to install homebrew

brew install watchman flow homebrew/cask/java cocoapods # Must install software

npm install -g yarn Yarn is recommended
Copy the code

Open Xcode Preferences Locations and ensure that the Command Line Tools are installed

To view information about the Java SDK, run the brew cask info Java command

Run to the Iphone configuration

Initializes an RN item

NPX React-native init MyApp --version 0.62.2Copy the code

If you run the NPX React-native run-ios command, you will be prompted to enter the ios directory and run the pod install command to install the dependencies. In order to install the dependencies properly, you need to change the image source to the domestic one as follows:

$ cd ~/.cocoapods/repos 
$ pod repo remove master
$ git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master

# finally go to your project and add to the first line of your project's podFile
$ source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'
Copy the code

Reference: mirror.tuna.tsinghua.edu.cn/help/CocoaP…

Then execute pod install, if the installation fails, you can delete and try again (please ensure that the external network is normal access)

Finally, run NPX React-Native run-ios in the project directory and see that the iPhone emulator starts. The first startup took a long time, about five minutes, and the default is the iPhone 11.

Run to Android configuration

Before running the Android emulator, make sure the following dependencies are installed:

To view it: Start Android Studio, click configure in the lower right corner and select SDK Manager.

After the SDK is installed, you need to install an emulator:

To install: Start Android Studio, click Configure in the lower right corner and select AVD Manager.

Due to the large package, installation is time-consuming. NPX React-native run-Android NPX React-Native run-Android NPX React-Native run-Android NPX React-Native run-Android NPX React-Native run-Android NPX React-Native run-Android

Click here to solve this problem. In short, it is the following two steps:

Open this file in the directory
/android/gradle/wrapper/gradle-wrapper.properties

# Change gradle-6.0.1-all.zip to Gradle-6.3-all.zip
distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip
Copy the code

And then you can run

Matters needing attention

  • If there is an error in run-ios, you can close the terminal and emulator and try again.
  • Many dependency packets are very large, so make sure your network is fast enough or you will die.
  • The external network must be able to access, and the speed can not be too slow, or the terminal is a red.

conclusion

After a long time, I finally got the environment fixed. I am really tired. If I find a convenient configuration way, I will update the article.

Above, thanks for reading!