# 快速集成React Native到現有原生應用(Android版)
## 一.官方集成流程
把 React Native 組件集成到 Android 應用中有如下幾個主要步驟：
- 配置好 React Native 依賴和項目結構。
- 創建 js 文件，編寫 React Native 組件的 js 代碼。
- 在應用中添加一個RCTRootView。這個RCTRootView正是用來承載你的 React Native 組件的容器。
- 啟動 React Native 的 Packager 服務，運行應用。
- 驗證這部分組件是否正常工作。
這個流程不夠通用,集成流程過于復雜,,,,,,所以,寫了rn的runtime,集成即可食用
##? 二.開發環境準備
### 1. 開發環境準備
#### 安裝依賴
必須安裝的依賴有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio。
#####? 1.Node, Watchman
我們推薦使用Homebrew來安裝 Node 和 Watchman。在命令行中執行下列命令安裝
```
brew install node
brew install watchman
```
Node，需要在 v8.3 以上
Watchman則是由 Facebook 提供的監視文件系統變更的工具。安裝此工具可以提高開發時的性能（packager 可以快速捕捉文件的變化從而實現實時刷新）。
##### 2.Yarn、React Native 的命令行工具（react-native-cli）
Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。React Native 的命令行工具用于執行創建、初始化、更新項目、運行打包服務（packager）等任務
```
npm install -g yarn react-native-cli
```
##### 3.JDK、Android Studio的安裝
略
更多更詳細搭建流程 [https://reactnative.cn/docs/getting-started.html](https://reactnative.cn/docs/getting-started.html)
### 2. 配置項目目錄結構
首先創建一個空目錄用于存放 React Native 項目，然后在其中創建一個/android子目錄，把你現有的 Android 項目拷貝到/android子目錄中。
### 3.安裝 JavaScript 依賴包
- 1) 在項目根目錄下創建一個名為package.json的空文本文件，然后填入以下內容：
```
{
? "name": "YReactNativeApp",
? "version": "0.0.1",
? "private": true,
? "scripts": {
? ? "start": "node node_modules/react-native/local-cli/cli.js start"
? }
}
```
注: 示例中的version字段沒有太大意義（除非你要把你的項目發布到 npm 倉庫）。scripts中是用于啟動 packager 服務的命令。
- 2) 接下來我們使用 yarn 或 npm（兩者都是 node 的包管理器）來安裝 React 和 React Native 模塊。請打開一個終端/命令提示行，進入到項目目錄中（即包含有 package.json 文件的目錄），然后運行下列命令來安裝：
```
$ yarn add react-native
```
這樣默認會安裝最新版本的 React Native，同時會打印出類似下面的警告信息（你可能需要滾動屏幕才能注意到）：
```
warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
```
這是正常現象，意味著我們還需要安裝指定版本的 React：
```
? yarn add react@16.2.0
```
注意必須嚴格匹配警告信息中所列出的版本，高了或者低了都不可以。
如果你使用多個第三方依賴，可能這些第三方各自要求的 react 版本有所沖突，此時應優先滿足react-native所需要的react版本。其他第三方能用則用，不能用則只能考慮選擇其他庫。
所有 JavaScript 依賴模塊都會被安裝到項目根目錄下的node_modules/目錄中（這個目錄我們原則上不復制、不移動、不修改、不上傳，隨用隨裝）。
? 把node_modules/目錄記錄到.gitignore文件中（即不上傳到版本控制系統，只保留在本地）。
### 4. YRuntime 快速集成
#### 1.在項目的 build.gradle 文件中為 React Native 添加一個 maven 依賴的入口，必須寫在 "allprojects" 代碼塊中:
在你的 app 中 build.gradle 文件中添加 React Native 依賴:
```
allprojects {
? ? repositories {
? ? ? ? maven {
? ? ? ? ? ? // All of React Native (JS, Android binaries) is installed from npm
? ? ? ? ? ? url "$rootDir/../node_modules/react-native/android"
? ? ? ? }
? ? ? ? ...
? ? }
? ? ...
}
```
確保依賴路徑的正確！以免在 Android Studio 運行 Gradle 同步構建時拋出 “Failed to resolve: com.facebook.react:react-native:0.x.x" 異常。
#### 2.集成Yruntime到項目
在項目中引用
```
implementation 'cn.yasin:yruntime:1.0.0'
```
#### 3.測試集成結果
##### 1. 運行 Packager
運行應用首先需要啟動開發服務器（Packager）。你只需在項目根目錄中執行以下命令即可：
```
$ yarn start
```
##### 2. 運行你的應用
保持 packager 的窗口運行不要關閉，然后像往常一樣編譯運行你的 Android 應用(在命令行中執行./gradlew installDebug或是在 Android Studio 中編譯運行)。
編譯執行一切順利進行之后，在進入到 YReactActivity 時應該就能立刻從 packager 中讀取 JavaScript 代碼并執行和顯示：
##### 3. 在 Android Studio 中打包
你也可以使用 Android Studio 來打 release 包！其步驟基本和原生應用一樣，只是在每次編譯打包之前需要先執行 js 文件的打包(即生成離線的 jsbundle 文件)。具體的 js 打包命令如下：
```
$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/
```
注意把上述命令中的路徑替換為你實際項目的路徑。如果 assets 目錄不存在，則需要提前自己創建一個。
然后在 Android Studio 中正常生成 release 版本即可！
