React Native 安装集成

安卓需要使用的工具：
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 上的入口文件。而且它是不可或缺的！

2. 添加你自己的 React Native 代码,把全部的代码都写到了index.js里（当然实际开发中我们并不推荐这样做）一般都是分开写。index只当一个入口

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('MyReactNativeApp', () => HelloWorld);

2.在原生代码中添加ReactRootView
1.在项目中Application中实现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
        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。