写在前面
目前很多大厂APP（如淘宝、饿了么、美团等等）并不是纯原生Android&IOS，也不是纯JS开发，而是Hybird APP开发，混合型优势很多：比如热更新，保证在一些类似双十一的活动到来时能够快速上线活动页面，用户不必再去更新APP。再来有效地减小了安装包的体积大小，大部分的界面都位于服务器端，本地只需要进行绘制。
1. 新建Android项目
我这里使用之前的项目
2. 在项目根目录引入React-Native模块
在项目根目录打开终端（tip:按住shift + 右键，选择打开dos窗口）
输入
npm init
这里输入一些该项目的属性，为了生成package.json文件的项目描述。
接下来引入rn的一些模块文件
npm install --save react react-native
此时会在根目录生成一个node_modules文件夹，存的是RN的一些模块文件
结束后会输出一些日志信息，如果出现版本问题需要重新下载，因为react-native对react的版本有严格要求，高于或低于某个范围都不可以。
npm i -S react@某.某.某版本//此处为提示的版本号
接下来打开package.json文件，在scripts模块下添加
"start": "node node_modules/react-native/local-cli/cli.js start"
我的package.json文件
{
"name": "plusclubrn",
"version": "1.0.0",
"description": "plusclub in rn",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"repository": {
"type": "git",
"url": "git+https://github.com/WithLei/plusClub.git"
},
"keywords": [
"react",
"native"
],
"author": "renly",
"license": "ISC",
"bugs": {
"url": "https://github.com/WithLei/plusClub/issues"
},
"homepage": "https://github.com/WithLei/plusClub#readme",
"dependencies": {
"express": "^4.16.4",
"react": "^16.6.3",
"react-native": "^0.57.7"
},
"devDependencies": {}
}
在项目根目录新建一个文件index.android.js，并将以下代码拷贝进去
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld extends Component {
render() {
return (
Hello, World
This is my first RN fixed Android Project
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
3.Native部分的配置
首先在app下的gradle添加依赖
implementation 'com.facebook.react:react-native:+'
这个+替换为你的项目根文件下node_modules/react-ative/android 下的react-native的版本
在项目目录下的gradle添加以下
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.0.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
url "https://jitpack.io"
}
// 如果有多个maven依赖，需要分开添加
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
// 注意这里和官网的是不一样的，由于我们的node_modules在根目录下，官方为
url "$rootDir/node_modules/react-native/android"
}
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
声明网络权限：
创建一个容器类
public class MyReactActivity extends ReactActivity {
@Nullable
@Override
protected String getMainComponentName() {
return "HelloWorld";
}
}
在清单文件里面声明此Activity
配置调试的界面
配置Application,继承RN的Application
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
public class App extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage()
//将我们创建的包管理器给添加进来
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
做一个跳转，我选择绑定到了原生的button上做响应事件
startActivity(new Intent(this, MyRNActivity.class));
运行APP
我们可以先把APP运行起来，跑在虚拟机或者真机上
然后启动服务器：在项目根目录下打开终端运行
npm start
然后就可以运行了，中间有不少坑，碰到的时候没截图，之后参考了很多博客和官方Issue解决了，这里就不复现bug了。
参考博客：
将RN嵌入到现有的Android应用中 - Byron_Walden
Guide文档 - React native中文网
Github issues - facebook