本篇为RN集成到现有android项目精简版本..，环境是Mac ..
一、环境搭建
假设android studio等 android开发环境是已经具备了，下面的是针对rn所必须的node来的。
1.1、Node.js安装
brew install node
如果你已经安装了 Node，请检查其版本是否在 v8.3 以上。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。
1.2、设置npm镜像
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
ok，第一步就小功告成了。
二、现有项目中集成rn
2.1生成package.json
在现有项目的android studio的teriminal命令行工具如,输入
npm init
npm init.png
输入npm init后会提示生成这个json文件时的各种key的值，如上面的package name:，可以随便输入，不想输入全部enter回车即可,直到最后提示is this ok，输入yes ok搞定package.json文件。
生成的package.json文件如下：
{
"name": "testrc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2.2 package.json添加启动脚本
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
可以直接把上面的scripts中的test那个key-value删除掉，添加start这个key-value即可。
2.3.添加react和react-native 模块
继续在android studio的teriminal命令行工具下输入
npm install --save react react-native
然后就是等着下载安装node_modules就好..
node_modules.png
2.4.添加ReactNative相关依赖
在现有项目的build.gradle下添加
compile 'com.facebook.react:react-native:+'
在project工程的build.gradle下添加react-native路径
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
maven.png
2.5.现有项目中调用起rn 模块
2.3.1 添加相关权限
<uses-permission android:name="android.permission.INTERNET" />
2.3.2 java相关代码
public class MyReactActivity extends AppCompatActivity 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")
.setJSMainModulePath("index.android") //路径的
//.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意这里的react-example必须对应“index.android.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "react-example", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@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();
}
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
return true;
}
return super.onKeyUp(keyCode, event);
}
}
MainActivity原生，原有的类调用起rn模块处代码
public class MainActivity extends AppCompatActivity {
private static final int OVERLAY_PERMISSION_REQ_CODE = 0x1111;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
findViewById(R.id.text1).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, MyReactActivity.class);
startActivity(intent);
}
});
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted...
}
}
}
}
}
2.3.3 rn react native代码编写
添加index.android.js文件到项目中
'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, World by afei</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('react-example', () => HelloWorld);
ok，大功告成了，可以准备跑起来了。
三、运行项目
3.1.开启node服务
继续在android studio的teriminal命令行工具下输入
npm start
npm start.png
即可直接跑起来了..，
注意,reload js需要在命令行中输入：
adb reverse tcp:8081 tcp:8081
这样就可以重新拉起ReactNative bundle中的js文件了。修改js文件也只需要摇一摇 reload js即可.
3.2 真机上
在项目的build.gradle的 android下添加
ndk {
abiFilters "armeabi-v7a", "x86"
}
网友评论