如果你有一個已經開發好或者正在開發的原生應用，此時想使用ReactNative來開發其中某個功能，那么這篇文章會一步步告訴，如何移植一個已有的原生Android項目.

目前業內主流的方式，部分模塊或功能使用ReactNative試水，且更多的還是使用React來做V的工作，類似網絡請求等功能還是通過調用原生封裝的組件來實現（ReactNative暫時沒有支持https），聽說阿里、餓了么等大型互聯網公司目前是用這個方式來試水ReactNative。

• 步驟一

1、準備App
新建一個文件夾Demo1，使用AS在Demo1文件夾中新建一個項目，名稱為android，此時Demo1目錄結構如下

Paste_Image.png

其中android便是AS新建的項目，它的目錄結構如下

Paste_Image.png

2、新建NativeActivity，布局文件包含一個Button，布局文件如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"            
  android:orientation="vertical" 
  android:layout_width="match_parent"                       
  android:layout_height="match_parent">    
  <Button        
      android:id="@+id/btn_click"        
      android:layout_width="match_parent"               
      android:layout_height="wrap_content"       
      android:text="點我"/>
</LinearLayout>

• 步驟二

1、在你的App里的build.gradle文件中，添加React Native依賴：

compile 'com.facebook.react:react-native:0.20.+'

2、在你的AndroidManifest.xml里增加Internet訪問權限：

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

3、新建ReactActivity，用來包裹ReactNative模塊

public class ReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {    
private ReactRootView mReactRootView;    
private ReactInstanceManager mReactInstanceManager;    
@Override    
protected void onCreate(@Nullable 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();
    //ReactModule需要和index.android.js中的組件名稱一致
    mReactRootView.startReactApplication(mReactInstanceManager, "ReactModule", null);
    setContentView(mReactRootView);    
}    
/*** JS不處理返回事件，會觸發此方法     */    
@Override    
public void invokeDefaultOnBackPressed() {        
    super.onBackPressed();    
}    
@Override    
public void onBackPressed() {        
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onBackPressed();        
    } else {           
        super.onBackPressed();        
    }    
}    
@Override    
protected void onPause() {        
    super.onPause();        
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onPause();        
    }    
 }    
 @Override    
 protected void onResume() {        
     super.onResume();        
     if (mReactInstanceManager != null) {
         mReactInstanceManager.onResume(this, this);        
     }    
 }    
 @Override    
 public boolean onKeyUp(int keyCode, KeyEvent event) {        
     // 開發者菜單        
     if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {            
           mReactInstanceManager.showDevOptionsDialog();            
           return true;        
     }        
     return super.onKeyUp(keyCode, event);    
 }
}

4、NativeActivity點擊按鈕跳轉到ReactActivity

public class NativeActivity extends AppCompatActivity {
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState){
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_native);
    findViewById(R.id.btn_click).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
          startActivity(new Intent(NativeActivity.this, ReactActivity.class));
      }
    });
  }
}

5、AndroidManifest增加devSettings界面（用來設置React開發服務器）

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

• 步驟三

1、在你的工程根目錄，運行以下代碼：會創建一個node模塊，然后react-native
作為npm依賴添加

npm init
npm install --save react-native

成功之后Demo1目錄結構如下

Paste_Image.png

2、打開工程目錄中的package.json文件然后在scripts字段下添加如下內容：

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

3、在工程目錄中新建index.android.js文件，并復制以下代碼—這是一個簡單的React Native界面

'use strict';
var React = require('react-native');
  var {
  Text,
  View
} = React;
class ReactModule extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      <Text style={styles.hello}>Hello, World</Text>
      </View>
    )
  }
}

var styles = React.StyleSheet.create({
  container: {
      flex: 1,
      justifyContent: 'center',
  },
  hello: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
  },
});

React.AppRegistry.registerComponent('ReactModule', () => ReactModule);

4、運行項目部署到手機
使用VSCode，不清楚的同學請查看[React Native]IDE-VSCode

最終效果圖如下：

device-2016-05-13-222312_0-37.gif

本文的源碼地址：Demo1