感謝：
http://www.lxweimin.com/p/22aa14664cf9 史上最詳細(xì)的Android原生APP中添加ReactNative 進(jìn)行混合開發(fā)教程
http://www.tuicool.com/articles/jIVNVvY [原]ReactNative學(xué)習(xí)——集成到原生android項目中

1、先用AndroidStudio創(chuàng)建一個新項目。在其根目錄中新建一個文件夾命名為android，把剩下的文件全都移到android文件夾下面。

2、在我們Android項目的build.gradle中添加React Native依賴，然后同步，具體代碼如下:

compile 'com.facebook.react:react-native:0.36.0'

這里可以執(zhí)行完本地倉庫的添加操作后，再進(jìn)行g(shù)radle編譯

3、AndroidManifest.xml中加入網(wǎng)絡(luò)訪問權(quán)限

<uses -permission android:name="android.permission.INTERNET" />

4、在Android項目的MainActivity中(實現(xiàn)點(diǎn)擊按鈕跳轉(zhuǎn)到rn界面)

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button viewById = (Button) findViewById(R.id.gogo);
        viewById.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(new Intent(MainActivity.this, ReactNativeDemoActivity.class));
            }
        });
    }
}

新建一個activity

public class ReactNativeDemoActivity extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        Log.d("leiiiooo", "集成成功");
        return "reactandroid";
    }
}

5、在Android項目的application中

public class DemoApplication extends Application implements ReactApplication {
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };
}

別忘了在AndroidManifest.xml中配置這個新建的application

6、在項目根目錄中執(zhí)行命令npm init 創(chuàng)建package.json文件

7、在package.json文件中的scripts中添加代碼：

start": "node node_modules/react-native/local-cli/cli.js start"

{
  "name": "reactandroid",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "",
  "license": "ISC"
}

8、然后在項目根目錄下面執(zhí)行npm install安裝依賴模塊
其實就是下載node_modules模塊(其實這些文件都可以從我們之前安裝好的react文件夾直接拷貝過來修改)

npm install --save react react-native

目錄

9、配置maven讓它可以加載我們node_modules文件夾中react-native本地最新版本庫。(修改之后如果compile 'com.facebook.react:react-native:0.36.0' 編譯失敗，則需要檢查：1、倉庫的路徑是否正確。2、本地安裝的react的版本號：npm info react-native)
具體修改文件路徑:

allprojects {
    repositories {
        jcenter()
        maven {
            url "$projectDir/../../node_modules/react-native/android"
        }
    }
}

11、創(chuàng)建我們的index.android.js放在根目錄中。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class chs extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('reactandroid', () => chs);

我也是直接在init的一個新項目中復(fù)制過來的。不過最后的AppRegistry.registerComponent(‘reactandroid’, () => chs)中的注冊的名字要跟MainActivity中的一樣跟package.json中的名字也保持一致。

12、然后就可以運(yùn)行項目了

react-native run-android

效果圖：

跳轉(zhuǎn)效果圖

附：
app gradle：

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.0"
    defaultConfig {
        applicationId "com.dotc.supobattery.notification.reactandroid"
        minSdkVersion 16
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.0.0'
    testCompile 'junit:junit:4.12'
    compile 'com.facebook.react:react-native:0.36.0'
}

項目gradle：

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.2'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()
        maven {
            url "$projectDir/../../node_modules/react-native/android"
        }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}