About React Native environment construction

As you can see even ** super beginners **, there was no environment construction for ** Android **, so I will leave it as an article ~~~! ** (Updated in August 2019) ** </ font>

Development environment

MacOS : Mojave/10.14.6 node : v10.15.3 react-native-cli : 2.0.1 react-native : 0.60.4 npm : 6.4.1

Target person

People who have succeeded in launching iOS using react-native, but have trouble launching Android.

Then Start !!!!!

① Install JDK 8

First, put in the Java required to run Android.

Note: Java version is not the latest version, 8 is used! (Because the lord cannot work well with other versions.)

--I want to download from Oracle, so I need to create an account.

--Once your account is complete, install Java 8 by referring to the following article.

Procedures for installing Oracle Java 8 (JDK) on macOS

--Once the installation is complete, check if Java 8 is installed in the terminal or iTerms!

java -version
//OK if you can confirm the following!
java version "1.8.0_221"

② Pass through!

If you are a beginner, you tend to feel like "I don't know what a pass is" or "I don't have to do that", but it's really important, so please do it! (This time I will only explain how to do it)

Caution: This time, I will explain to people for bash (beginners are usually this, so please feel free to ignore this caution statement)! (People using zsh will not need commentary)

--Open the terminal, iTerm and prepare スクリーンショット 2019-08-16 17.25.40.png

--Use vim to edit on the terminal.

//Copy
vi ~/.bash_profile

Then you will see the screen below.

--You can use the arrows on the keyboard to move the cursor, so move to an empty line and edit it.

//Because it cannot be edited as it is,Press "i" → It will be editable.
//Let's copy the one below. Not only Java, but also the path of Android Sdk to be used later.
export JAVA_HOME=`/usr/libexec/java_home -v 1.8`
export PATH=/usr/local:$PATH:$NODEBREW_HOME/bin:$ANDROID_HOME:$ANDROID_NDK_HOME:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
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

――When you can copy and paste, press the esc button to cancel the edited state and save the edited contents.

//I want to save the edited contents and finish editing vim, so type the following command on the current screen.
//Caution:Be sure to do it after pressing the esc button!
:wq

--If you do the above, you will be returned to the original terminal screen. --I want to reflect the change in the configuration file, so execute the following command in the terminal.

source ~/.bash_profile

→ This completes the path setting!

③ Download and install of Android Studio

--Let's Download Android Studio officially!

--When the download is complete, install it. You will be asked to select an installation type, so select "Custom". android sdk android sdk platform performance (intel ® haxm) android virtual device After confirming that these four are checked, click "next" to install.

--When the installation is completed, the following screen will appear. (If it doesn't come out, let's launch Android Studio!)

--Install the necessary files such as SDK. --From the bottom of the initial screen, launch Configure-> SDK Manager and install SDK Platforms → Android 6.0 (Marshmallow). Please check the same place according to the screen below.

--Finally, click "Apply" to download and install the SDK and build tools.

-Next, we will create an AVD! Please proceed according to the image.

→ You don't need the last 2 of the AVD Name (the Lord has already made one, so it has been arbitrarily assigned 2)

⑤ Finally, run the emulator

In react-native, iOS can start the application with cli without launching the simulator (emulator), but

`Terminal.`


react-native run-ios

** Android cannot launch the app unless you launch the emulator first! ** ** ↑ Here's the point !!!! </ font> So, after launching the emulator, I would like to launch the app.

--Start emulator スクリーンショット 2019-08-16 18.33.56.png スクリーンショット 2019-08-16 18.50.25.png

--Launch the app

//Start the server
npm start

//Launch the app on Android
react-native run-android

Note: The terminal for launching the server and the terminal for launching the application are separated. [Recommended method] You can split it by doing cmd + D on the terminal, so either go into the project directory, one is to launch the server, the other is to launch the app. ..

Reference article

https://qiita.com/EBIHARA_kenji/items/2f6938c4fda7cecbeb19 https://qiita.com/takaishota/items/4db36a806a257582fa1f https://qiita.com/tekoneko1997/items/ab1254e4472802514190#android-studio%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB https://qiita.com/ponnjinnka/items/006b632a0b56369451b9

[JAVA] Android environment construction that even monkeys can understand [React Native]