安卓需要使用的工具：
JDK 1.8
Python2
Node
Android Studio
- Android SDK(Android 8.1 (Oreo))
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device)
1.安装依赖
在window 上开发必须需要安装的2个软件Node 、Python2
(1) Python 2
注意勾选 Add python.exe to Path,选项，这样就可以在安装完成后，不用手动去添加环境变量,
Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。
安装完，打开cmd.exe,输入python,然后enter,如果能成功返回ptython的版本号等信息，则说明安装成功。
(2)注意 Node 的版本必须高于 8.3，安装完 Node 后建议设置 npm 镜像以加速后面的过程
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
(3)Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
npm install -g yarn react-native-cli
安装完 yarn 后同理也要设置镜像源：
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。
(4)Android Studio的安装(如果已经安装过并且有SDK则不需要安装，直接进入配置Android_HOME的变量配置就行)
1.首先下载和安装AndroidStudio https://developer.android.com/studio/index.html,国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接
2.装界面中选择"Custom"选项，确保选中了以下几项：
Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device
3.安装 Android SDK,你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。 然后下载你需要对应的版本的sdk
(5) 配置 ANDROID_HOME 环境变量
React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录:
如默认:c:\Users\你的用户名\AppData\Local\Android\Sdk
2.创建新项目
(1)选择一个文件夹目录:
使用 React Native 命令行工具来创建一个名为"FistProject"的新项目：
react-native init FistProject
这个过程可能会耗费一段时间，请耐心等待，初始化完成之后，切换到新建的FistProject文件夹，执行:
cd FistProject
react-native run-android
这时候需要你有模拟器，或者连接Android真机,等待编译完成，直到在android的手机上出现 WelCome to react-native,则大功告成
3.集成到现有原生应用里面
(1)在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：
{
"name": "ThirdProject", //这个名字，保持跟你项目名字一致，自行修改
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
}
(2)接下来我们使用 yarn 或 npm（两者都是 node 的包管理器）来安装 React 和 React Native 模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），然后运行下列命令来安装：
yarn add react-native
所有 JavaScript 依赖模块都会被安装到项目根目录下的node_modules/目录中（这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。
(3)把 React Native 添加到你的应用中
1.在你的 app 中 build.gradle 文件中添加 React Native 依赖:
implementation "com.facebook.react:react-native:+" // From node_modules
2.在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 "allprojects" 代码块中:
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "../node_modules/react-native/android"
}
(4)创建一个index.js文件
1.首先在项目根目录中创建一个空的index.js文件。(注意在 0.49 版本之前是 index.android.js 文件)
index.js是 React Native 应用在 Android 上的入口文件。而且它是不可或缺的！
- 添加你自己的 React Native 代码,把全部的代码都写到了index.js里（当然实际开发中我们并不推荐这样做）一般都是分开写。index只当一个入口
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</Text>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);
2.在原生代码中添加ReactRootView
1.在项目中Application中实现ReactApplication
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
2.编写从原生界面跳转到RN界面的Activity
public class ReactActivity 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")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意这里的MyReactNativeApp必须对应“index.js”中的
// “AppRegistry.registerComponent()”的第一个参数
mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", 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(this);
}
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
}
3.在 Android Studio 中打包
在每次编译打包之前需要先执行 js 文件的打包(即生成离线的 jsbundle 文件)。具体的 js 打包命令如下：
react-native bundle --platform android --dev false --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/
这个输出的路径需要自己项目目标对应正确的,最终会你在项目中生成assets目录。
每次修改了js写的代码，你生成离线包即可，然后再编译的你的项目
4.运行 Packager
yarn start
保持 packager 的窗口运行不要关闭，然后像往常一样编译运行你的 Android 应用
(在命令行中执行./gradlew installDebug或是在 Android Studio 中编译运行)。
5.在你的主入口MainActivity中添加一个跳转到RN界面的按钮
public void jumpRn(View view) {
Intent intent = new Intent(this, ReactActivity.class);
startActivity(intent);
}
OK。
