Android项目集成React-Native

React社区生态圈的加持和Facebook的大力推广后，react native貌似声望颇高。近日得闲，于是想学习学习。类似weex基于三端统一，减少开发成本，RN+原生混合开发，这将是一个不错的选择。

在这之前找了很多资料，但很多并没有走通，填填补补的一路走来费了不少时间，所以写了这篇博客，希望能帮助需要的童鞋。

还没配置环境的童鞋可以到这里去配置环境：环境搭建

环境配置了就一步一步往下走：

1 在你的app中 build.gradle 文件中添加 React Native 依赖：

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

2 在你的app中 build.gradle的android的defaultConfig中添加 so库：

ndk {

    abiFilters "armeabi-v7a", "x86"

}

3 在工程目录下找到工程的 build.gradle文件中，添加 maven依赖：

 maven {

    // All of React Native (JS, Android binaries) is installed from npm

    // url "$rootDir/../node_modules/react-native/android"

    // build.gradle文件和node_modules目录都是在根目录下面，所以需要把改成下面的形式:

    url "$rootDir/node_modules/react-native/android"

}

4 清单文件设置权限：

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

/设置调试 的权限/

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

清单文件注册DevSettingsActivity：

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

5 开打Terminal输入命令:

 npm init 生成package.json文件（提示我们输入一些信息，默认不输入即可）

6 在package.json的scripts字段中家加入：

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

7 npm install --save reactr eact-native

创建node_modules目录并把react和react-native下载到了其中

8 然后就是创建index.android.js文件,这里贴出官方的 js代码:

（注意：下面demo2的入口要跟package.json的name与入口ReactActivity中的getMainComponentName方法返回值一致）

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

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

class AwesomeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          我是 原生项目嵌入的 ReactNative
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </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('demo2', () => AwesomeProject);

9 新版本RN中只需要自定义一个Activity，并继承ReactActivity，实现getMainComponentName方法，在getMainComponentName方法中

返回RN注册的名称即可，名称需要与index.android.js中AppRegister的名称相同。通过源码可以看到，其实在ReactActivity中已经帮助我们实

现了ReactRoow的添加和ReactInstanceManager的默认配置。

public class MyReactActivity extends ReactActivity {

@Nullable
@Override
protected String getMainComponentName() {
    return "demo2";
}
}

10 然后创建Application，去初始化ReactNativeHost。自定义Application需要继承ReactApplication，在源码loadApp方法中，会将当前Activity的Application强转为ReactApplication，所以这是必须的步骤。getJSMainModuleName方法返回的是js的入口文件。

public class MainApplication extends Application implements ReactApplication {

private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

    @Override
    public boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage()
        )
    @Override
protected String getJSMainModuleName() {
    return "index.android";
   }
}; 
@Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } 
@Override public void onCreate() { 
super.onCreate(); SoLoader.init(this,false);
 }
}

11 在你的MainActivity界面中只有一个TextView，点击跳转到MyReactActivity ，跳转报错。

这时需要在module中新建一个assets目录，然后通过命令行将react-native的代码打包到assets目录中：

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

12 打开Terminal窗口，执行npm start来启动服务器

13 运行你的app就可以了