首先需要先安装环境 这里就直接引用官方文档地址了，如果没有配置环境的话，请先配置一下环境。
初始化项目##
使用Android新建项目 最低版本需要设置为16 因为RN只支持最低版本为16
打开CMD命令，切换到工程目录下面，执行npm init
这时候终端会提示输入一些内容。
name:工程名 (不能有大写 随意起就行了)
version:(版本号 这里回车默认就好了)
description:this is react native project(这里就是一个描述)
entry point:index.android.js(这是入口的js文件名)
test command:（回车使用默认值）
git repository:(输入git地址或者回车)
keywords:react native(关键词)
author:pencilso(作者)
license:(回车使用默认就好)
配置package.json文件
这时候你的项目根目录下应该有了一个package.json的文件，打开它，找到scripts这一栏，在text这个字段后面添加一个字段,"start": "node node_modules/react-native/local-cli/cli.js start" 贴一下完整的配置
{
"name": "reactnative",
"version": "1.0.0",
"description": "no description",
"main": "index.android.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"keywords": [
"react",
"native"
],
"author": "pencilso",
"license": "ISC"
}
这时候 JSON文件已经配置好了，接下来该安装React Native了
使用终端 切换到工程目录下 执行 npm install --save react react-native
然后静静的等待好一会，就可以了，速度跟网络有关，如果没有设置阿里的镜像源的话，是需要科学上网才能安装的。
设置阿里镜像源请查看搭建开发环境
可选操作 ：curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
在工程目录下终端执行，下载这个.flowconfig文件，如果你是windows系统，而且没有curl这个命令又想下载的话。
很简单，打开你的下载工具，比如说迅雷，粘贴这个地址https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
然后复制到迅雷里面新建任务，开始下载。如果下载下来的文件名不是.flowconfig的话，就需要重命名。
然而右键文件重命名是不行的，需要cmd命令 ren 旧文件名 新文件名 比如:ren a.txt .flowconfig
然后将该文件，复制到工程目录下即可。
配置Android gradle
配置RN的依赖 打开工程下的build.gradle文件 找到allprojects这一栏 加入maven配置 。
allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}
然后打开你的Module中的build.gradle文件
在dependencies里面添加RN依赖。
compile "com.facebook.react:react-native:+" // From node_modules.
然后找到android 这个配置里面 加入:
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
找到defaultConfig这个配置 加上ndk支持 注意 一定要加:
ndk {
abiFilters "armeabi", "armeabi-v7a", "x86", "mips"
}
然后重新build一下
创建入口Js文件
在你的工程目录创建一个文件，即配置package.json的时候输入的入口js文件名
index.android.js创建这个文件之后 把下面的代码粘贴进去就好了
'use strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
Hello, World
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
创建React Native界面
新建一个Activity，我起名叫ReactNativeActivity，用作React Native的界面。
需要注意一点 如果需要支持5.0以下的设备的话，需要继承AppCompatActivity。
另外这个Activity需要设置一下主题:Theme.AppCompat.Light.NoActionBar
如果你的Application本身就是这个主题的话就不用动了，否则的话，这里在清单文件给Activity单独配置一下吧。
android:name=".ReactNativeActivity"
android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
直接贴Activity代码 在你的入口Activity写一个按钮使用Intent跳转到ReactNativeActivity即可
public class ReactNativeActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@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)
//.setUseOldBridge(true) // uncomment this line if your app crashes
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
setContentView(mReactRootView);
}
@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(this);
}
}
@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);
}
}
有一点需要注意的是 Activity中的代码
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
还有入口js中的代码
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
它们都有一个HelloWorld 这其实就是一个名字，不过Activity和js当中需要对应。
配置 AndroidManifest##
首先配置一下权限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
然后加入RN的设置Activity
android:name="com.facebook.react.devsupport.DevSettingsActivity"
android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
基本上配置到这里就结束了，已经搭建完环境了。
Clean Project Rebuild Project 这两个都执行一下
接下来 打开终端 切换到工程目录，执行npm start（如果你只是嵌入而不需要开发RN的话，就不需要npm start启动服务了）
当终端出现以下界面的时候，恭喜你，你可以点击AS上的运行按钮了。
配置Bundle通信
运行跳转到RN的界面的时候，我相信你这时候应该报了一个错误：
Could not get BatchedBridge, make sure your bundle is packaged correctly
如果没出现的话，就跳过这一步吧
打开终端 切换到项目目录 执行以下代码 注意:as默认创建的Module叫app，如果你的Module名字不叫app的话，需要将下面命令中的app改为你的Module名。
成功后会在你的assets下面创建两个文件 (index.android.bundle index.android.bundle.meta)
如果失败的话，尝试一下手动创建这两个空文件然后再执行命令。
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
如果你的设备是>=6.0的话，我相信你这时候应该崩溃了。
没有悬浮窗权限 需要在跳转到ReactNative之前进行一下权限判断
直接贴代码
@Override
public void onClick(View v) {
if (Build.VERSION.SDK_INT >= 23) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION);
startActivity(intent);
return;
}
}
startActivity(new Intent(this, ReactNativeActivity.class));
}
最后上一下运行效果图
RN的坑，到此踩了一部分。好心塞。RN的官方文档都感觉不太全，比如说强制依赖的配置没写，比如RN的生命周期方法名都改变了，然而官方文档还是旧的方法名，最后进入ReactInstanceManager类当中查看源码才发现生命周期的方法名。
