React Native builds the development environment

Open a terminal window and enter the following command to install NodeJS:

sudo apt-get install -y build-essential
curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo ln -s /usr/bin/nodejs /usr/bin/node
Copy the code

Yarn is a tool provided by Facebook to replace NPM and speed up the download of Node modules. React Native’s command-line tools perform tasks such as creating, initializing, updating projects, and running the Packager service.

npm install -g yarn react-native-cli
Copy the code

After installing YARN, set the image source as follows:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
Copy the code

If you encounter an EACCES: permission denied permission error, run sudo NPM install -g yarn react-native-cli command (Linux only).

Android Studio 2.0 or higher.

React Native currently requires Android Studio2.0 or higher.

Android Studio requires Java Development Kit [JDK] 1.8 or later. You can view the JDK version you currently have installed by typing javac -version on the command line. If the version does not meet your requirements, you can download it from the official website. Choco install jdk8 or apt-get install default-jdk

Android Studio includes the Android SDK and emulators needed to run and test React Native apps.

Do not change the installation options unless otherwise specified. For example, Android Studio installs Android Support Repository by default, which is required by React Native.

There are some options that need to be changed during the installation process:

• chooseCustomOptions:

• chooseAndroid Virtual Device

• Once the installation is complete, select it from the Welcome screen of Android StudioConfigure | SDK Manager.

• inSDK PlatformsIn the window, selectShow Package DetailsAnd then inThe Android 6.0 (Marshmallow)The admissionGoogle APIs,Android SDK Platform 23,Intel x86 Atom System Image,Intel x86 Atom_64 System ImageAs well asGoogle APIs Intel x86 Atom_64 System Image.

• inSDK ToolsIn the window, selectShow Package DetailsAnd then inAndroid SDK Build ToolsThe admissionThe Android SDK Build - Tools 23.0.1(It must be this version). And then I have to check the bottom oneAndroid Support Repository.

Make sure the ANDROID_HOME environment variable correctly points to the path of your installed Android SDK.

To do this, add the following commands to the ~/.bashrc and ~/.bash_profile files. If you are using a different shell, select the corresponding configuration file:

# If you are not installing the SDK through Android Studio, the path may be different, please check for yourself. export ANDROID_HOME=~/Library/Android/sdkCopy the code

Then use the following command for it to take effect immediately (or not until restart) :

source ./bash_profile
Copy the code

You can check that this variable is set correctly using echo $ANDROID_HOME.

Watchman is a tool provided by Facebook to monitor file system changes. Installing this tool can improve development-time performance (Packager can quickly catch changes to files for real-time refreshes).

Installing Watchman also avoids a node bug related to file monitoring.

Type the following command in the terminal to compile and install Watchman:

Git clone https://github.com/facebook/watchman.git CD watchman git checkout v4.5.0 # this is the latest edition of the paper released/autogen. Sh ./configure make sudo make installCopy the code

Flow is a static JS type checking tool. The odd colon question mark you see in many of the examples, and type-like writing of method parameters, are part of the flow tool’s syntax. This syntax is not part of the ES standard, but Facebook’s own code specification. So beginners can skip it (you don’t need to install the tool, and it’s not recommended to try to learn flow syntax).

Enter the following command in the terminal to install flow:

npm install -g flow-bin
Copy the code

Starting Gradle Daemon can greatly speed up incremental compilation of Java code.

touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties
Copy the code

When you install Android Studio, you may see something like this:

If your system supports KVM, you should install Intel’s Android emulator accelerator.

You can add the Android SDK’s tools and platform-tools directories to the PATH variable to run Android tools, such as Android AVD or ADB Logcat, on the terminal.

Bashrc or ~/.bash_profile add:

# Your specific path may be different, please confirm yourself. PATH="~/Android/Sdk/tools:~/Android/Sdk/platform-tools:${PATH}" export PATHCopy the code

Use the package manager to install Git (e.g. Sudo apt-get install git-all).

Nuclide is an Atom-based integrated development environment provided by Facebook for writing, running, and debugging React Native applications.

Click here to read Nuclide’s introductory documentation.

We prefer to write React Native apps using WebStorm or Sublime Text.

Genymotion is a better performance option than the original emulator that comes with Android Studio, but it’s only free for individual users.

1. Download and install Genymotion (Genymotion relies on the VirtualBox VIRTUAL machine. The download option provides options with and without VirtualBox, please select as required).
2. Open the Genymotion. If you have not already installed VirtualBox, you will be prompted to install it at this point.
3. Create a new emulator and start it.
4. After launching the React Native app, you can press F1 to open the developer menu.

react-native init AwesomeProject
cd AwesomeProject
react-native run-android
Copy the code

Tip: You can use the –version parameter to create a project of the specified version. Example: React-native init MyApp –version 0.39.2. Note that the version number must be accurate to two decimal points.

Note to Windows users, do not init projects in the default System32 directory on the command line! There will be all kinds of permission restrictions can not run!

Now that you have the project running successfully, we can start to try our hand at making changes:

• Open it using your favorite text editorindex.android.jsAnd change a few lines at random
• Press R twice, or use the Menu key (usually F2, in Genymotion emulators)⌘ + M) Open the Developer menu and selectReload JSYou can see your latest changes.
• Running on a terminaladb logcat *:S ReactNative:V ReactNativeJS:VYou can see the logs of your application.

A: congratulations! You’ve successfully run and modified your first React Native app.

• If you want to run the application on a real machine, see Running it on a device.

• If you encounter some problems, please refer to faQs.