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就可以了
