React Native 已有android工程集成

忙完项目，终于有时间研究一下火了2年的RN。刚开始各种坑简直是给我泼了冷水。不过没关系，我坚信填坑的大神们这两年没有白干。

进入正题，现在就说如何在已有的工程中集成react native。

首先搭建环境，可以根据官方文档来（中文文档链接 http://reactnative.cn/docs/0.31/getting-started.html#content）
1、Android Studio 2.0 及以上

2、node.js 照着最新的下载就对了

3、官方文档有说要装python2，但我没有装，暂时没发现什么问题（待后续研究）

4、安装react-native-cli，在node.js的命令环境中输入npm install
-g react-native-cli，安装了他，才能使用react-native 这一套命令

搭完环境，开始集成到已有android 工程中，先贴一下我的项目目录结构，蓝色下划线标记的文件或目录就是react native相关的



防止万一，先在cmd中任意目录试试敲入  npm -v  看看是否有返回版本，返回说明node.js的环境已经搭建好。android环境就不赘述。



cmd进入工程的根目录，输入以下命令：

$ npm init
$ npm install --save react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

输入npm init 会生成package.json，根据提示输入应用信息，其中填写的name不能够大写。

npm install --save react-native 下载node_modules，这里下载很慢，慢慢等，或者直接去网上下载

或者改用下面的命令

$ npm install -g cnpm --registry=http://registry.npm.taobao.org

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig 下载.flowconfig文件到项目中

接着按官方文档，创建index.android.js这个文件，复制下面代码进去。。。。但是。。。。

'use strict';

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

class HelloWorld extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, World</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

但是，需要注意，

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

这段代码里，第一个HelloWorld代表项目名称，需要和后面要说的java初始化RN时传入的moduleName保持一致，第二个HelloWorld代表的是前面代码中定义的组件

class HelloWorld extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, World</Text>
</View>
)
}
}

然后添加安卓对RN的依赖，当然是添加到app/build.gralde里面

compile "com.facebook.react:react-native:+"  // From node_modules

这里需要注意

compile 'com.android.support:appcompat-v7:23.2.0'//和react native 冲突

compile 'com.android.support:appcompat-v7:23.0.1'//添加这个版本依赖就没问题

接着在工程根目录下的build.gradle里添加React Native的本地目录入口：

//build.gradle文件的内容

buildscript {
repositories {
jcenter()

}
dependencies {
classpath 'com.android.tools.build:gradle:2.1.2'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}

allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
//这里是添加 RN 运行的js环境  也就是node_modules所在的目录
//网上有些地方是 url "$rootDir/../node_modules/react-native/android"  (新手tip:A/..代表返回A目录的上级目录)
//那是因为他们的node_modules 文件夹在android工程的上一级目录里
url "$rootDir/node_modules/react-native/android"
}
}

}

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

//这是RN的入口activity

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
<pre name="code" class="java">        //这个HelloWorld就是前面说的要和AppRegistry.registerComponent('HelloWorld', () => HelloWorld);保持一致
<pre name="code" class="java">        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);//博主项目里定义的 

  //mReactRootView.startReactApplication(mReactInstanceManager, "gradle-rn-test", null);//博主项目里定义的应用名是gradle-rn-test setContentView(mReactRootView); } @Override public void invokeDefaultOnBackPressed() {
super.onBackPressed(); }}

到这里，集成工作都差不多完成了，不过一定要注意，介于有些同学因为从其他地方下载的各个RN模块，react native的jar包版本和node_modules的版本最好保持一致，我也是在这里坑了好久。





接下来运行，我这里讲在真机上运行：

如果直接运行，会出现如图错误提示，因为debug模式下运行react native要先加载node_modules中的js环境，所以必须先启动里面的服务



命令行进入项目的根目录，输入>react-native start

我是直接在android studio中的终端中输入的，是一回事



服务开启，那么还需要在手机里配置pc的本地ip和这服务的端口号。要调起RN的debug设置界面，需要在项目里添加如下代码：

andriodmanifest.xml里：

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

app/build.gradle里：

android {
defaultConfig {
...
minSdkVersion 16
targetSdkVersion 23
versionCode 1
versionName "1.0"
//这是需要加入的
 ndk {
abiFilters "armeabi-v7a", "x86"
}
}
...
}

哦，之前忘说了，app的minsdkversion至少是16，因为RN只支持安卓4.1以上的版本。

再到根目录下的gradle.properties里添加：

android.useDeprecatedNdk=true

添加完这些配置，重新运行app到手机里，打开应用，摇一摇手机，就可以出现设置页面，如图进行配置







配置完后，重新加载页面，就ok了。

好了，helloWorld出来了。。。

打release包的问题，也是坑。

途中常遇到的坑后续总结。

未完待续。。。。。。。。。。。