Android development React Native project creation and environment construction

  Let’s take a look at the effect of RNDemo first. I have to complain about it here. To be honest, RN is after all js performance and not natively smooth. Look at the effect and you will know:

  First, you need to install NodeJS, because React Native (referred to as RN, I will call it RN later) itself is based on the Javascript language and the React language. Later you will find that all files are suffixed with .js. So NodeJS is required to compile the files, and as we will introduce later, we also need to use the Node command to initialize the RN project and download all the required node_modules packages. Okay, let's not talk nonsense. Let's start.

  If you have installed NodeJS, you can use the npm command, otherwise you can't find the command. I will first introduce how to use RN in Android Studio.

  1. Use Android Studio to create an empty project such as "RNDemo", but when creating an Android project, you need to pay attention to: Minimum SDK currently supports API16 at the minimum, so it is better to create it with mini API16 or higher.

  2. After the Android Demo project is created, click Terminal (note that it needs to be executed in the root directory)

    Next execute the following code: 

npm init

npm install --save react react-native

   note:

   init mainly generates package.json files based on reminders

   install --save react react-native 安装React 和React Native

   Then open https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig in the browser

   Download the file and place it in the root directory:

 

    3. Add and modify configuration content

 

1. Modify the package.json file

 

 

2. Create entry js file

3. Add build file configuration

build.gradle(Module:app)添加：

defaultConfig {
       ...
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

android {
    ...
    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:+'
    }
}

compile "com.facebook.react:react-native:+"

build.gradle(Project:Application)添加：

 

allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

 

4.Manifest file configuration:

5. Activity inherits ReactActivity, Application implements ReactApplication

Add MyApplication to the name of the manifest.

Everything is ready, start run'App', and then enter the command react-native start in Terminal. Note (if it is a real machine, you need to execute adb reverse before this tcp:8081 tcp:8081 to ensure that port 8081 is connected to the real machine Do not occupy the port number)

If you need to package the App, first you need to create a new assets directory under android/app/src/main, and then enter in the Terminal command line:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

            Then you will find that two bundle files will be generated in the assets directory you created, which can be packaged:

 

4. Finally, how to program RN

First of all, you need to understand the basics of react language and JavaScript language, and then it is best to install Webstorm. Other software can also be used. However, Webstorm is currently the most popular and the best to use. All basic operations are similar to AndroidStudio development tools. And Webstorm can directly create React Native projects. Android and IOS projects are automatically created and can be used directly:

Source code