使用本地仓库实现最新版ReactNative集成Android

感谢：
http://www.jianshu.com/p/22aa14664cf9 史上最详细的Android原生APP中添加ReactNative 进行混合开发教程
http://www.tuicool.com/articles/jIVNVvY [原]ReactNative学习——集成到原生android项目中

1、先用AndroidStudio创建一个新项目。在其根目录中新建一个文件夹命名为android，把剩下的文件全都移到android文件夹下面。

2、在我们Android项目的build.gradle中添加React Native依赖，然后同步，具体代码如下:

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

这里可以执行完本地仓库的添加操作后，再进行gradle编译

3、AndroidManifest.xml中加入网络访问权限

4、在Android项目的MainActivity中(实现点击按钮跳转到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 getPackages() {
            return Arrays.asList(
                    new MainReactPackage()
            );
        }
    };
}

别忘了在AndroidManifest.xml中配置这个新建的application

6、在项目根目录中执行命令npm init 创建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、然后在项目根目录下面执行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、创建我们的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 (
      
        
          Welcome to React Native!
        
      
    );
  }
}

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的一个新项目中复制过来的。不过最后的AppRegistry.registerComponent(‘reactandroid’, () => chs)中的注册的名字要跟MainActivity中的一样跟package.json中的名字也保持一致。

12、然后就可以运行项目了

react-native run-android

效果图：

跳转效果图

附：
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
}