react native 学习笔记----将react native嵌入到Android原生应用

不仅可以在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 reactreact-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的生命周期函数，并添加一些代码：

@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,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到了对应的位置。

react native 学习笔记----将react native嵌入到Android原生应用

相关文章