React Native 接入现有Android项目

Window + Android

Chocolatey

Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样：

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

Python 2

choco install python2

Node

choco install nodejs.install

科学上网

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm config set proxy [http://10.19.110.55:8080](http://10.19.110.55:8080/)

到工程目录下：

1、新建package.json文件，拷贝如下代码

<pre style="margin: 10px 0px 0px; padding: 0px; color: rgb(51, 51, 51); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">{
  "name": "maplearn",  "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.2"  }
}</pre>

2、npm init

3、npm install

4、npm start

5、工程添加依赖

app工程下：

compile "com.facebook.[react:react-native:+](http://reactreact-native+/)" // From node_modules

全工程下：

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

6、创建RN代理类，并添加跳转到该页面的native代码：

import com.facebook.react.ReactActivity;

 public class MyReactActivity extends ReactActivity{ 

 @Override protected String getMainComponentName()

{ return "RNComponent"; }

}

7、改造Application类：

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, "RNComponent", null);

setContentView(mReactRootView);

}

@Override

public void invokeDefaultOnBackPressed() {

super.onBackPressed();

}

}

8、在index.android.js 中添加页面代码

9、编译执行

10、在Rn页面设置调试页面代理:

本机IP:8081

参考链接：
http://blog.csdn.net/imsunlight/article/details/60756528