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

不仅可以在react native 的js界面和现有工程的界面之间跳转，而且可以把js写的界面当成一个控件，嵌入到现有的activity，作为原生界面的一部分使用。

第一节：按照官方的例子，把js写页面放在一个activity，在原生应用里启动该activity。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!