React Native (RN for short) is a cross-platform mobile application development framework that Facebook opened source in April 2015. It is a derivative of Facebook’s early open source JS framework React on the Native mobile application platform. It supports iOS and Android platforms. RN uses the Javascript language, HTML-like JSX, and CSS to develop mobile applications, so technicians familiar with Web front-end development can enter mobile application development with minimal learning.
Today’s notes mainly record the setup of ReactNative environment in MAC system:
First of all, it should be noted that ReactNative’s environment depends on node, Android and ios development environment, so you need to install the environment in sequence:
1. Install Node.js
During node installation, the node version must be greater than or equal to 10
1.1 Open the Download page of NodeJs official website:Nodejs.org/en/download…
1.2 Based on the system
1.3 Start the terminal and run the node -v command to check the node version. If the version number is displayed, the installation is successful.
2. Install Python2
2.1 Python’s official download address is:www.python.org/downloads/
After the default installation, python2 is configured into environment variables.
3, installation,Java SE Development Kit (JDK)
1. Download the JDK and install it.
2. Set Java environment variables (pre-Android environment)
sudo vim /etc/profile
JAVA_HOME = “/ Library/Java/JavaVirtualMachines jdk1.8.0 _77. JDK/Contents/Home/”
CLASS_PATH=”$JAVA_HOME/lib”
PATH=”.:
JAVA_HOME/bin”
3. Make the command take effect
source /etc/profile
4. Check environment variables
echo $JAVA_HOME
4. Switch the source
First, use the NRM tool to switch taobao sources
npx nrm use taobao
If necessary, use the following command to switch back
npx nrm use npm
5. Installation of yarn
Yarn is an alternative to NPM provided by Facebook. Yarn is a package manager for your code. It allows you to use and share code (such as JavaScript) from developers around the world. Yarn can do this quickly, safely, and reliably.
After installing YARN, use yarn instead of NPM. For example, use yarn add library name instead of NPM install library name
npm install -g yarn
6. Install the React-native CLI
The React – Native CLI is the React Native command line tool
npm install -g react-native-cli
or
yarn add -g react-native-cli
7. Install the Watchman
Watchman is an open source project from Facebook that monitors files and logs changes to them. When a file changes, it can trigger actions such as executing commands.
brew install node
brew install watchman
8. Build the Android environment
1. Download the new Android Studio
Android Studio contains all the tools you need to build Android applications.
2. Install the Android SDK
Android Studio installs the latest version of the Android SDK by default. Currently, building React Native apps requires an Android 9 (Pie) SDK (note that the SDK version is not the same as the terminal system version, RN currently supports Android 4.1 and above).
3. Configure the Android environment variables
vi ~/.bash_profile
If you are not installing the SDK through Android Studio, the path may be different, so check for yourself.
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
Copy the codeAgain to make the above configuration take effect:
source $HOME/.bash_profile
Check again:
echo $ANDROID_HOME
4. Start the simulator
9. Build the IOS environment
1. Download the Xcode
Xcode is an integrated development tool that runs on The Mac OS X operating system and is developed by Apple Inc. Xcode is the fastest way to develop macOS and iOS applications. Xcode has a unified user interface design, coding, testing, debugging are all done in a simple window.
React Native currently requires Xcode 10 or higher. You can download it from the App Store or from the Apple Developer website. This step installs the Xcode IDE, Xcode’s command-line tools, and the iOS emulator at the same time.
Xcode command line tool
Launch Xcode, and in the Xcode | Preferences | check Locations menu is equipped with a version of the Command Line Tools. Xcode’s command line tools include some necessary tools, such as Git, etc.
10. Create a ReactNative project
1. Create
react-native init AwesomeProject
2. Run the Android project
Enter the target directory first:
cd AwesomeProject
Then run the project:
react-native run-android
3. Run the ios project
Again, enter the project first:
cd AwesomeProject
Then run the project:
react-native run-ios
Run the official React-Native demo
Finally, we must run the official demo in the process of learning about the ReactNative project. Next, we will introduce the operation steps of the official demo:
IOS environment
If you need to run in the IOS environment, there are the following steps:
1. Install Xcode
2.brew install cocoapods
3.cd RNTester;
4.pod install;
5. Open rntesterPods.xcworkspace and build
The Android environment
If you need to run in the Android environment, it is divided into the following steps:
1. Download the NDK
The NDK is required to run the project in an Android environment:
Here are a few download addresses
Developer.android.com/tools/sdk/n… www.androiddevtools.cn tools.android-studio.org developer. The android. Google. Cn/the NDK/downloa…
(The NDK version should be adapted)
2. Configure the NDK environment
vi ~/.bash_profile export NDK_HOME=/Users/wayne/Downloads/android-ndk-r10e export PATH=
NDK_HOME/
Then run the following command for it to take effect immediately (otherwise it will take effect after restart) : source ~/.bash_profile
3. Then run:
./gradlew :RNTester:android:app:installJscDebug
./scripts/packager.sh
Run the project
1. Access the target directory
cd react-native
2. Install dependencies
npm install
3. Run the project
npm start