Method of integrating react native into Android native project

Development environment preparation

First, install all dependent software (such as NPM) required by react native on the Android platform according to the development environment building tutorial.

Add JS code to the application

Run in the root directory of the project:

NPM init creates an empty node module (in fact, it creates a package.json description file), while NPM install creates a node_ Modules directory and download react and react native to it. As for the curl command in the third step, its essence is to download the. Flowconfig configuration file, which is used to restrict the writing of JS code. This step is not required and can be skipped. Now let's open the newly created package.json file and add it in its scripts field:

Now your package.json content should look like this:

Next, create the index.android.js file in the project root directory, and then copy and paste the following code:

preparation

Add the react native dependency to the build.gradle file in your app:

When syncing, the following errors may be reported (Pit 1):

For Google's solution, we need to add the following code in build.gradle of app:

Compile perfectly! Ha ha~

Add a maven dependent entry for react native in the build.gradle file of the project, which must be written in the "allprojects" code block:

Normally, the build.gradle file and node of the project_ The modules directory is under the root directory, so you need to

Next, declare the network permissions in the androidmanifest.xml manifest file:

If you need to access the devsettingsactivity interface, you also need to declare in androidmanifest.xml:

Add native code

To call react native through native code, like this, we need to create a reactrootview object in an activity, associate it with a react application and set it as the main view of the interface.

If you want to run on systems below Android 5.0, please use appcompatactivity in com.android.support: appcompat package instead of activity.

Note that the react example here must correspond to the first parameter of "appregistry. Registercomponent()" in "index. Android. JS" and the name attribute in package. JSON

We need to set the theme of myreactactivity as theme.appcompact.light.noactionbar, because many components use this theme.

Configure permissions so that red screen errors in development can be displayed correctly

If your device version is 23 or above, you need to confirm whether your app has overlay permission

Determine whether to obtain permission in onactivityresult

Run your app

To run an application, you first need to start the development server (packager). You just need to execute the following command in the project root directory:

You can use your myreactactivity as a launchactivity, start it directly, or jump from another activity. Now you just need to run the app and post the code of my mainactivity below

There is only one textview in the interface. Click to jump to myreactactivity

What a sad story. The jump report is wrong.

Continue Google Dafa for help:

We need to create a new assets directory in the module. Android Studio provides us with a very convenient way to do it with one click!

Then we execute the following command on the command line of the root directory:

This is to package the react native code into the assets directory of Android. After the command is executed, we will find that there are three more files in the assets directory,

This is what our react native code looks like after packaging, and then we run app.

Then we will be surprised to find that the app runs successfully!

however

It's not over here. We tried shaking the phone and opening the legendary debug setting dialog box, but it didn't seem to respond. Is it because the shaking force is not enough? We tried our best to shake the mobile phone, but it was still useless ~ and some students may have found that we just used the official packing order to complete the display of the app. That is to say, we are using the code inside the app instead of the code on our local node service. This is a hole in the official tutorial. Let's go back to the place where the activity is initialized and modify the code a little.

The setusedevelopersupport method does not work, because the default value of config.debug is false, so we write it as true manually. We ran the program again at this time and found it very perfect. That's it.

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.