感谢：
http://www.jianshu.com/p/22aa14664cf9 史上最详细的Android原生APP中添加ReactNative 进行混合开发教程
http://www.tuicool.com/articles/jIVNVvY [原]ReactNative学习——集成到原生android项目中
1、先用AndroidStudio创建一个新项目。在其根目录中新建一个文件夹命名为android，把剩下的文件全都移到android文件夹下面。
2、在我们Android项目的build.gradle中添加React Native依赖，然后同步，具体代码如下:
compile 'com.facebook.react:react-native:0.36.0'
这里可以执行完本地仓库的添加操作后，再进行gradle编译
3、AndroidManifest.xml中加入网络访问权限
<uses -permission android:name="android.permission.INTERNET" />
4、在Android项目的MainActivity中(实现点击按钮跳转到rn界面)
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button viewById = (Button) findViewById(R.id.gogo);
viewById.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startActivity(new Intent(MainActivity.this, ReactNativeDemoActivity.class));
}
});
}
}
新建一个activity
public class ReactNativeDemoActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
Log.d("leiiiooo", "集成成功");
return "reactandroid";
}
}
5、在Android项目的application中
public class DemoApplication extends Application implements ReactApplication {
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
};
}
别忘了在AndroidManifest.xml中配置这个新建的application
6、在项目根目录中执行命令npm init 创建package.json文件
7、在package.json文件中的scripts中添加代码：
start": "node node_modules/react-native/local-cli/cli.js start"
{
"name": "reactandroid",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {},
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"author": "",
"license": "ISC"
}
8、然后在项目根目录下面执行npm install安装依赖模块
其实就是下载node_modules模块(其实这些文件都可以从我们之前安装好的react文件夹直接拷贝过来修改)
npm install --save react react-native
9、配置maven让它可以加载我们node_modules文件夹中react-native本地最新版本库。(修改之后如果compile 'com.facebook.react:react-native:0.36.0' 编译失败，则需要检查：1、仓库的路径是否正确。2、本地安装的react的版本号：npm info react-native)
具体修改文件路径:
allprojects {
repositories {
jcenter()
maven {
url "$projectDir/../../node_modules/react-native/android"
}
}
}
11、创建我们的index.android.js放在根目录中。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class chs extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('reactandroid', () => chs);
我也是直接在init的一个新项目中复制过来的。不过最后的AppRegistry.registerComponent(‘reactandroid’, () => chs)中的注册的名字要跟MainActivity中的一样跟package.json中的名字也保持一致。
12、然后就可以运行项目了
react-native run-android
效果图：
附：
app gradle：
apply plugin: 'com.android.application'
android {
compileSdkVersion 25
buildToolsVersion "25.0.0"
defaultConfig {
applicationId "com.dotc.supobattery.notification.reactandroid"
minSdkVersion 16
targetSdkVersion 25
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:25.0.0'
testCompile 'junit:junit:4.12'
compile 'com.facebook.react:react-native:0.36.0'
}
项目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:2.2.2'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
jcenter()
maven {
url "$projectDir/../../node_modules/react-native/android"
}
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}