android stadio集成React-native

第一步、创建android工程

第二步、切换到Android Studio左下角的Terminal窗口，执行npm init命令

 注意一：init命令记住name参数

init命令，需要填写诸如name、version等参数，输入后按回车接着输入下一个参数。init之后会生出package.json文件。name最为重要，工程名，在后面的index.android.js（这个名称与参数中要一致）和MyReactActivity里都要用到。其它的都可以一路回车使用默认值。

第三步、分别执行

$npm install 

$npm install --save react（安装过程失败会提示对应的版本号与react-native不符合。。对应提示的版本去安装）

如果RN项目中有用到第三方库记得安装对应模块

第四步、创建.flowconfig文件

   .flowconfig文件可以从facebook的github上复制，然后在工程的根目录创建.flowconfig文件，将其内容复制进去即可。

第五步、打开package.json文件，然后将“start": "node node_modules/react-native/local-cli/cli.js start"添加到scripts节点下

第六步、把rn项目的index.android.js拷贝进来放在根目录，与rn相关的组件一并拷贝

第七步 在App的build.gradle文件下添加facebook react 依赖包

compile 'com.facebook.react:react-native:+' （之前指定具体版本发现ReactApplication找不到）没指定版本以后可以
compile 'com.android.support:appcompat-v7:23.1.+' （版本没对应上也会报错）

compileSdkVersion 23
minSdkVersion 16 reactNative最小支持到16targetSdkVersion 23

第八步、在project的build.gradle文件下添加如下

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

第九步、添加权限

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

第十步、添加NDK的支持

在app的build.gradle文件下的android节点下的

defaultConfig

 增加ndk支持

defaultConfig {    applicationId "com.example.summer.myapplication"    minSdkVersion 16    targetSdkVersion 23    versionCode 1    versionName "1.0"    ndk {        abiFilters "armeabi-v7a","x86"    }}

并且在android节点下增加

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

然后在gradle.properties文件中增加

android.useDeprecatedNdk=true

第十一步、

编写一个activity继承ReactActivity 然后重写里面的方法。

public class MyReactActivity extends ReactActivity {    @Override    protected String getMainComponentName() {        return "test";    }}

注意点：返回的这个值要跟你npm init里面的那个name属性一样，然后在清单文件中配置这个activity

第十二步、编写Application

public class MyApplication extends Application implements ReactApplication {    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {        @Override        public boolean getUseDeveloperSupport() {            return BuildConfig.DEBUG;        }        @Override        protected List<ReactPackage> getPackages() {            return Arrays.<ReactPackage>asList(                    new MainReactPackage()            );        }    };    @Override    public ReactNativeHost getReactNativeHost() {        return mReactNativeHost;    }    @Override    public void onCreate() {        super.onCreate();        SoLoader.init(this,false);    }}

然后在清单文件中配置

第十三步

在Terminal中敲入react-native start或者npm start 会卡在Loading dependency graph, done. 

解决方案：在app/src/main下创建assets目录 ，然后再运行react-native start 等到出现Loading dependency graph, done.关闭 再运行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/

（相当于分成2步进行）

参考文章：

Android原生项目集成React Native

RN集成原生Android开发