Original link: motalks.cn/2016/10/23/…

Please indicate the source of reprint.

When I set up the React Native Android development environment, I referred to many articles and found that most of the articles provided too complicated information. For an Android developer who has been debugging with a real machine for years, the setup of the React Native development environment can be easier. This article is intended for Android developers using Mac and real machine debugging. Make sure you have a good network (you know).

In the Mac environment, there are only four steps to set up the React Native Android development environment.

  1. Install Homebrew Suite Manager
  2. Installation Node. Js
  3. Install the React Native command line tool
  4. Environment variable configuration for ANDROID_HOME

Homebrew

It’s an indispensable suite manager for MacOS, but you can use it to download and install Node.js and React Native command-line tools. Homebrew can be found here. Open the Mac terminal and enter the following command to install:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"Copy the code

After installation, enter:

brew -vCopy the code

If Homebrew X.X.X is displayed, the installation is successful. You can also use this command to check if you are not sure if Homebrew has been installed before.

Note: In Max OS X 10.11 (El Capitan), homebrew may encounter “EACCES: Permission denied” when installing the software in /usr/local. This can be fixed using the following command:

sudo chown -R `whoami` /usr/localCopy the code

Node.js

This is a JavaScript environment based on the Chrome V8 engine. It is conceptually similar to Java’s JRE.

To install Node.js using Homebrew, run the following command:

brew install nodeCopy the code

React Native requires NodeJS 4.0 or higher, Homebrew installed 6.x by default at the time of this release.

To verify this, use the following command to check the node.js version number.

node -vCopy the code

My results are V4.1.2, I don’t know if it’s the tutorial or the different options I selected when I installed. Note: Node.js also provides two versions on its official website, one is the stable version supported by LTS for a long time, currently v4.6.0. The other is the current latest version, currently v6.8.1. V4.1.2 still works, so let’s move on to the next step.

React Native command line tool (react-native CLI)

Not much to say, React Native’s command-line tools perform tasks like creating, initializing, updating projects, and running packagers. The installation command is as follows:

npm install -g react-native-cliCopy the code

Environment Variable Configuration

There are no specific release requirements for Android Studio and JDK. You can use your existing development environment to try it out.

ANDROID_HOME environment variable: Make sure the ANDROID_HOME environment variable correctly points to the path of the Android SDK you installed. To do this, add the following command to the ~/.bash_profile file. Files starting with a decimal point are hidden in the Finder and may not exist. Run the sudo vi ~/. Bash_profile command on the ue to create or edit the profile.

About vi operation, oneself is really not familiar with, now excerpt a paragraph of basic operation. So you don’t have to spend too much time here. When you enter the VI editing page, you cannot enter text in command line mode. Press I to switch to INSERT mode for editing. After editing, press ESC to exit the command line mode. Press the: colon key to enter Last Line mode. Enter wq to save the file and exit.

Once you’re comfortable with this, add the following two lines to the.bash_profile file (note: ~ represents the user directory, i.e. /Users/ your username /) and check that this variable is set correctly using echo $ANDROID_HOME.

export ANDROID_HOME=~/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/toolsCopy the code

In short, the React Native development environment is already set up for those of you using a real machine. Now you can test the React Native project.

Test your first React Native project

Initialize an RN project named AwesomeProject (you can replace it with any name), go to the project’s directory, type a run command and wait for the deployment to run. The command is as follows:

react-native init AwesomeProject 
cd AwesomeProject
react-native run-androidCopy the code

Now that you’ve successfully run your first RN project, we can try to modify it.

Go to the index.android.js file in the AwesomeProject folder, change the Hello, World string to any character, then shake the phone, the configuration menu will appear, select Reload JS, and your changes will take effect immediately. Are you already feeling the magic of RN?

The DOS and don ‘ts of the real machine and the problems you may encounter

(Android 5.0 and above) use adb reverse

Note that this option is only available on Android devices 5.0 or later (API 21+).

Start by connecting your device to your computer via a USB cable and enabling USB debugging (see the section above for how to enable USB debugging).

  1. runadb reverse tcp:8081 tcp:8081
  2. No more configuration is required and you can use itReload JSAnd other development options.
(Android 5.0 or below) Connect to your local development server over Wi-Fi
  1. Make sure your computer and your phone are in the same Wi-Fi environment first.
  2. Run your React Native app on your device. Same as opening any other App.
  3. You should see a “red screen” error. This is normal, and the following steps will resolve the error.
  4. Shake the device, or run itadb shell input keyevent 82, can be openedDeveloper menu.
  5. Click to enterDev Settings.
  6. Click on theDebug server host for device.
  7. Enter your computer’s IP address and port number (for example, 10.0.0.1:8081). On the Mac, you can look up your IP address in system Settings/Network.
  8. Go back toDeveloper menuThen selectReload JS.
Problems you might encounter

Problem a

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Unable to upload some APKsCopy the code

Solution: the project in the ~ / android/app/build. The gradle gradle version 1.2.3 instead

Question 2

Shaking the phone doesn’t bring up the Reload Js Settings menu

Solution: In miui and Meizu systems, you only need to open the suspension window permission in the permission management of application management.

Next arrangement

React Native integrates with existing Android projects

React Native project hot update

React Native optimization (package size optimization, preloading to solve the first load of white screen, etc.)