Due to work needs, I am learning React Native Android recently. Review the past and learn something new. Write down what you’ve learned to consolidate your knowledge and give help to those in need. It should be noted that I have just come into contact with React Native, so MY understanding of React Native is still superficial or even ignorant. Please point out any mistakes. Thank you!

So let’s get started. For programmers, the first lesson of getting started is, of course, building environments.

Environment set up

###Chocolatey is a package management tool for Windows. Chocolatey is officially recommended for installing Node.js and Python2. The installation method is to enter directly into CMD

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%; %ALLUSERSPROFILE%\chocolatey\bin"
Copy the code

The first step was an error, but it is easy to see from the log that Chocolatey needs to be installed from the command line under administrator privileges. Win8启动 administrator CMD is in the lower left corner right-click, you can see the command prompt (administrator) options, again input command install, install successful visible below.

After Chocolatey is installed, you can install Node.js and Python directly from the command line

choco install nodejs.install
Copy the code

###Python2

choco install python2
Copy the code

###react-native cli The react-native cli is the react Native command line tool for creating, initializing, updating projects, and running packager tasks. NPM is a package management tool that comes with Node.js, so use NPM to install react-native CLI

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

### Install the environment variable ANDROID_HOME:

At this point, the setup is complete. ## New project environment is configured, create a new project to try! For example, I want to create a new project called HelloReact in the root directory of drive F. Enter CMD into the corresponding location and type:

react-native init HelloReact
Copy the code

As you can see, NPM automatically creates the project and downloads the associated packages

After the project is set up, you can see it from the command line

After the project is established, to run our Android app, just enter the address of the project and enter the command react-native run-android. Let’s try it

As can be seen, after entering the command, a JS server will be automatically started, which runs on port 8081 by default. The APP loads JS through the LOAD JS bundle. Unfortunately, the gradle version of the project automatically created is not the same as the gradle version of the native project, so it will also automatically download gradle for the project. Use Github (. Ignore rule) to modify gradle version of HelloReact project. After modifying CMD, enter react-native run-android again

If you can see BUILD SUCCESSFUL, your app should already be installed on your phone. If all goes well, you’ll see

If you see this, your app is running successfully. But that’s certainly not satisfying enough. What about Hello World? So let’s try to modify the app to show what we want.

### Build in Android Studio

Enter the new HelloReact project and you can see the structure of the project

Use Notepad to open package.json, and you can see that it records some information about the project, such as the version number of the React-Native used, etc. If you see a familiar Android folder, click on it. Yes, this is a complete Android project structure, use Android Studio to import the project to have a look.

As you can see, the entry in the manifest is MainApplication, and in addition to MainActivity, the Activity registers a DevSettingsActivity, which is actually a Settings interface that can be invoked in the app by shaking the phone.

Application integrates ReactApplication, and getPackages() Bridges Native and JS.

MainActivity inherits ReactActivity and returns the ‘HelloReact’ string using the getMainComPonentName() method. The MainActivity should be a main component. Registered in JS. I didn’t see the familiar layout in the whole app. How did I realize the interface I saw before? Remember the words on the app?

To get started, edit index.android.js

The answer is in the index.android.js file at the root of the project, which is the gateway to React Native Android. Open it up and have a look

Do you see anything familiar? So let’s just cheat a little bit and modify the string and see what happens.

Save the changes and run them from Android Studio.

So the question is, what the hell is package Bundle? But doesn’t it look familiar? The react-native run-android file has a log that says react Packager ready. You can’t use react-Native run-Android every time. Of course not, in the command line (note that you need to go to the project root directory, which is HelloReact, not HelloReact\Android. A quick way to start js server is to select the HelloReact folder, hold down shift, and select open command line here) and type React-native start. Give it a try!

After successfully opening, shake the phone to display the menu and select Reload

If you see these words in the command line, you have successfully loaded the JS bundle. Sometimes you might make mistakes like reading newspapers

The solution is to shake your phone, select Dev Settings, Debug Server Host, type in your computer’s IP address :8081 (ipconfig, IPv4 address, for example, 192.168.1.1:8081), Reload.

Soon you’ll be able to see it on your phone, too

Hello World! Finally. I’ll leave it there for today, and next time I’ll write about how to write some simple JS and then call native components in JS. See you in the next blog.