不僅可以在react native 的js介面和現有工程的介面之間跳轉，而且可以把js寫的介面當成一個控制元件，嵌入到現有的activity，作為原生介面的一部分使用。

第一節：按照官方的例子，把js寫頁面放在一個activity，在原生應用裡啟動該activity。

開始之前，你要搭好react native開發Android環境，我是在mac上搭建的IDE，具體參看我前面的blog。本文以一個hello world為例。 第一步：先在Android studio中建立Hello world程式。
第二步：進入你工程的根目錄，在命令列執行下面的命令：
$ npm init  
這個命令會建立package.json檔案，輸入這個命令後，會提示你輸入一系列引數。按照提示輸入：我輸入的

引數如下：
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (myAppWithTest) integrate  // 輸入專案名稱
version: (1.0.0) // 回車，使用預設版本號
description: test native for react // 輸入專案描述
entry point: (index.js) // 回車，使用預設檔名
test command:     // 回車，使用預設值
git repository: // 回車留空或填入Git地址
keywords: react test // 填寫關鍵字react和test
author: andy // 填寫作者
license: (ISC) // 回車，使用預設值

上面填完後，再輸入下面的命令：
$ npm install --save react react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

上面的命令執行後，會建立node_modules目錄。
第三步：開啟在根目錄下剛才建立好的package.json檔案，新增下面一行

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

第四步：編輯index.android.js檔案，加入簡單的程式碼，你可以copy下面的程式碼到該檔案：

'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, Andy</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

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

第五步：在你app的build.gradle檔案中新增react native依賴庫

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

第六步：在你project的 build.gradle檔案中新增 react native路徑：

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

第七步：在你的AndroidManifest.xml檔案中新增網路許可權

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

第八步：建立一個載入JS程式碼的activity，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();
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);


        setContentView(mReactRootView);
    }


    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

第九步：在AndroidManifest.xml檔案中，為剛才建立的activity指定一個主題，

 <activity
   android:name=".MyReactActivity"
   android:label="@string/app_name"
   android:theme="@style/Theme.AppCompat.Light.NoActionBar">
 </activity>

第十步：新增一些activity的生命週期函式，並新增一些程式碼：

@Override
protected void onPause() {
    super.onPause();


    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostPause();
    }
}


@Override
protected void onResume() {
    super.onResume();


    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostResume(this, this);
    }
}


@Override
protected void onDestroy() {
    super.onDestroy();


    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostDestroy();
    }
}

@Override
 public void onBackPressed() {
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onBackPressed();
    } else {
        super.onBackPressed();
    }
}

第十一步：在MyReactActivity中新增按鍵響應函式：

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
        mReactInstanceManager.showDevOptionsDialog();
        return true;
    }
    return super.onKeyUp(keyCode, event);
}

第十二步：在hello world程式的介面上新增一個按鈕，載入MyReactActivity。

Button bt = (Button)findViewById(R.id.start_react);
bt.setOnClickListener(new View.OnClickListener() {
    @Override
public void onClick(View view) {
        Intent intent = new Intent(MainActivity.this,MyReactActivity.class);
        startActivity(intent);
    }
});

第十三步：到這裡基本可以在android studio中執行程式了，先在命令列啟動js所需的伺服器，執行下面的命令即可：

$ npm start

最後，在android studio，像啟動其他程式一樣執行程式，點選按鈕就可以載入react native介面了。激動吧。如下圖：

第二節：將react native 寫的介面當成組建嵌入到現有的activity。

 這個其實比較簡單，新建一個佈局xml檔案，在上面的建立的MyReactActivity的onCreate函式中，像原生一樣呼叫setContentView(R.layout.native_js); 然後通過addView 把reactnative 的介面，加入進入。下面是完整的onCreate函式程式碼：

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

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

        setContentView(R.layout.native_js);
        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();
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

        LinearLayout view = (LinearLayout) findViewById(R.id.react_root);
        view.addView(mReactRootView);

    }

編譯執行，如下圖，灰色是原聲介面部分，藍色為react native介面：

問題：今天【20160908】將react native嵌入到原生應用後，執行碰到下面的錯誤。

解決辦法：我另外用命令react-native init  test.新建了一個應用，然後把新工程node_modules目錄下的react目錄copy到了對應的位置。