[React Native]移植原生Android项目

如果你有一个已经开发好或者正在开发的原生应用，此时想使用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