How to deploy an environment for developing applications on React Native

Good day!


 
Having decided to start developing applications for React Native, I was faced with the problems of deploying the environment. Today I want to share the experience of setting it up.
 
Of course, on 3r310. official site
There is a detailed description, but following only these recommendations, it was quite difficult to make all the settings.
 
3r314.
 
NodeJS . I have the latest version at the time of writing of article ???
 
3r33352.  
3r33333. Install Python2 and JavaSE . Used by jdk-???
 
3r33352.  
3r33354.
 
 
3r33311. React Native CLI [/b] 3r33333.
 
3r33333.  
3r33333. Install React Native CLI
 
3r33352.  
3r33354.
 
3r33333. 3r33311. npm install -g react-native-cli [/b] 3r33333.
 
 
3r33311. Android development environment [/b] 3r33333.
 
3r33333.  
3r33333. Download and install Android Studio
 
 
After starting, select the custom installation
 
 
How to deploy an environment for developing applications on React Native
 
 
Next, tick the "Android Virtual Device" and specify let it be up to the Android folder - or leave it as is C: Users% USERNAME% AppDataLocalAndroidSdk
 
3r33311. The main thing is that there are no Cyrillic on the way! 3r33312.
 
Especially with this, problems may arise in the future. For example, my system username was Cyrillic “C: Users Alexander”, and after launching the application grandle could not find the path, because the path looked like “C: Users ???????? ”
.  
 
 
3r3116.
 
 
Click "next". We leave the recommended amount of RAM, click next and install.
 
3r33352.  
3r33333. Android SDK - open the studio and go to settings
 
3r3178. Appearance & Behavior → System Settings → Android SDK [/i] .
 
 
On the tab 3r3178. SDK Platforms [/i] Turn on the tick “Show Package Details” and for 3r3178. “Android 8.0 (Oreo)” [/i] install:
 
3r33333.  
3r33333. 3r3178. Android SDK Platform 26 [/i] 3r33352.  
3r33333. 3r3178. Intel x86 Atom_64 System Image [/i] 3r33352.  
3r33333. 3r3178. Google APIs Intel x86 Atom_64 System Image [/i] 3r33352.  
3r33354.
 
3r3162.
 
 
Now select the tab "SDK Tools" Turn on the tick “Show Package Details”
 
and install the
package.  
3r33333.  
3r33333. 3r3178. “???” 3r3179. 3r33352.  
3r33354.
 
 
Click 3r33311. "Apply" [/b] 3r33333. .
 
3r33352.  
3r33354.
 
 

3r33311. Variable environments [/b] 3r33333.
 
3r33333.  
3r33333. 3r33311. ANDROID_HOME [/b]
 
Create a variable for ANDROID_HOME :
 
 

 
3r33333.  
3r33333. The variable name is ANDROID_HOME 3r33352.  
3r33333. The value of the variable (you can see in Android Studio)  
3r33354.
 
 

 
 
3r33352.  
3r33333. 3r33311. JAVA_HOME [/b]
 
By analogy, create a variable JAVA_HOME :
 
3r33333.  
3r33333. Variable name: JAVA_HOME 3r33352.  
3r33333. Variable value: C: Program FilesJavajdk- (version)  
3r33354.
 
3r33352.  
3r33333. Change the system variable Path:
 
 

 
 
Add 4 values:
 

 
3r33333. % JAVA_HOME% bin
 
3r33352.  
3r33333. % ANDROID_HOME%
 
3r33352.  
3r33333. % ANDROID_HOME% platform-tools
 
3r33352.  
3r33333. % ANDROID_HOME% watchman
 
3r33352.  
3r3302.
 
3r33352.  
3r33354.
 

3r33311. We create application and we start the emulator [/b] 3r33333.
 
3r33333.  
3r33333. Go to a convenient folder for us in the console and type:
 
3r33333. react-native init MyTestProject


 
3r33352.  
3r33333. Open our project in Android Studio and open AVD Manager
 
 
3r33333.
 
 
If AVD is not downloaded, download and run
 
3r33352.  
3r33333. Next, go to the console in the folder with the application and type:
 
3r33333. react-native run-android
 
 
After that, I found the application started.
 
3r33352.  
3r33354.
 
 
This article used the official manual from r3r3360. React Native
 
+ personal experience!
 
I hope this article will help those who have encountered problems or decided to start developing native applications on React
 
.
! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e. ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r33375.
+ 0 -

Add comment