最近公司有意向要用react-native做开发，自己在去年的时候也接触过，不过没有深入探讨，这两天，抽出时间看了看，顺便看了一下文档，做了一个简易的dome，由于我本人用的mac os 系统，Mac os 系统不同与windos 系统，做起来也相对轻松容易：接下来我就言简意赅的阐述集成搭建步骤：
注意事项：在项目集成之前，说明你已经配置好了react-native 的开发环境，如果没有配置好请参照react-native 中文开发网站：/docs/0.47/getting-started.html
准备好开发环境。
1.打开终端，创建一个项目根目录，如／reactNativeProject：
~$ mkdir reactNativeProject
2.在根目录下创建一个／android 目录：
~$ cd reactNativeProject~$ mkdir android
3.打开android studio 在以android 做为android原生项目的根目录创建一个原生的应用：步骤如下：
注意：project location: 的选择路径为刚才创建项目的…／reactNativeProject／android 目录：这样直接下一步，注意选择的最小sdk版本：API 16: Android 4.1 (Jelly Bean),不得低于这个版本，低于就不支持了：
直接next，最后到finsh,创建成功android 项目：
4.接下来，要在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：
{"name": "MyReactNativeApp","version": "0.0.1","private": true,"scripts": {"start": "node node_modules/react-native/local-cli/cli.js start"},"dependencies": {"react": "16.0.0-alpha.6","react-native": "0.44.3"}}
具体操作如下：
$ touch package.json$ open package.json
在打开的弹出package.json 文本编译器中复制上面要填写的内容，并保存。
5.接下来我们使用npm（node包管理器，Node package manager）来安装React和React Native模块。 请打开一个终端/命令提示行，进入到项目目录中（即包含有package.json文件的目录），然后运行下列命令来安装：
~$ npm install
安装的结果如下图：
会多出来一个node_modules目录：
5.在原生的应用中 配置maven
android/build.gradle 文件中添加 React Native 依赖:
allprojects {repositories {jcenter()maven {// All of React Native (JS, Android binaries) is installed from npmurl "$rootDir/../node_modules/react-native/android"}}}
在 android/app/build.gradle 配置依赖库：
dependencies {.......compile "com.facebook.react:react-native:+" // From node_modules.}
同步一下sync now。
6.配置权限：
接着，在 android/app/src/main/AndroidManifest.xml 清单文件中声明网络权限:
<uses-permission android:name="android.permission.INTERNET" />
如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
7.代码集成
在／reactNativeProject 根目录下创建一个index.android.js文件
～$ touch index.android.js
打开index.android.js,复制一下内容：
～$ open index.android.js
'use strict';import React from 'react';import {AppRegistry,StyleSheet,Text,View} from 'react-native';class HelloWorld extends ponent {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('MyReactNativeApp', () => HelloWorld);
在android 项目创建一个类ReactActivity.java 代码如下：
package com.example.reactnativedome;import android.content.Intent;import .Uri;import android.os.Build;import android.provider.Settings;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.KeyEvent;import android.widget.Toast;import mon.logging.FLog;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactRootView;import com.mon.LifecycleState;import com.mon.ReactConstants;import com.facebook.react.devsupport.DoubleTapReloadRecognizer;import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;import com.facebook.react.shell.MainReactPackage;import static java.security.AccessController.getContext;public class ReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {public static final int OVERLAY_PERMISSION_REQ_CODE = 1235;private ReactRootView mReactRootView;private ReactInstanceManager mReactInstanceManager;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_react);if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {if (!Settings.canDrawOverlays(this)) {Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,Uri.parse("package:" + getPackageName()));startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);}}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();// 注意这里的MyReactNativeApp必须对应“index.android.js”中的// “AppRegistry.registerComponent()”的第一个参数mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);setContentView(mReactRootView);}@Overridepublic void invokeDefaultOnBackPressed() {super.onBackPressed();}@Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) {// super.onActivityResult(requestCode, resultCode, data);if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {if (!Settings.canDrawOverlays(this)) {// SYSTEM_ALERT_WINDOW permission not granted...}}}}@Overrideprotected void onPause() {super.onPause();if (mReactInstanceManager != null) {mReactInstanceManager.onHostPause(this);}}@Overrideprotected void onResume() {super.onResume();if (mReactInstanceManager != null) {mReactInstanceManager.onHostResume(this, this);}}@Overrideprotected void onDestroy() {super.onDestroy();if (mReactInstanceManager != null) {mReactInstanceManager.onHostDestroy();}}@Overridepublic void onBackPressed() {if (mReactInstanceManager != null) {mReactInstanceManager.onBackPressed();} else {super.onBackPressed();}}@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {mReactInstanceManager.showDevOptionsDialog();return true;}return super.onKeyUp(keyCode, event);}}
接着，在 android/app/src/main/AndroidManifest.xml 清单文件中注册：
<activity android:name=".ReactActivity"android:label="@string/app_name"android:theme="@style/Theme.AppCompat.Light.NoActionBar"></activity>
在MainActivity.java 修改代码如下：
package com.example.reactnativedome;import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);findViewById(R.id.tv_react_native).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Intent intent=new Intent(MainActivity.this,ReactActivity.class);startActivity(intent);}});}}
在 android studio 中 run 运行安装到手机中：
最后在android studio 中终端 terminal 下输入：
～$ nom start
效果如图：
运行结果如图示：
参考来自：/docs/0.47/integration-with-existing-apps.html#content
