一、環境準備

按照這里的教程安裝，本次demo是在windows下使用。

二、創建工程

1、創建一個Android 工程Test。2、創建一個react native工程。工程目錄大致如下：

其中Test目錄就是創建的Android原生工程，rn目錄就是react native工程目錄(PS：我在實際應用過程中rn的名字是不能變的，最開始我取名叫

React Native結果在build.gradle中鏈接的時候找不到，不知道是不是我用的姿勢不對，如果有知道的話請指正)。rn工程的創建有兩種方法。

方法一：直接用react native init rn。我們rn目錄中需要的東西：

其中src是我的rn代碼目錄，package.json就是react native的配置。

方法二：新建一個rn文件夾，在其中放入package.json然后命令行運行 npm i就可以了，package.json可以是從新建的react native項目中提取也可以從其它項目提取但注意把不要的插件去掉。

package.json

上圖是pakage.json的部分插件依賴，如果不需要redux那么在拷貝package.json的時候就把"redux"："^4.0.0"去掉就好，（這里指的是用方法二創建rn，調用npm i之前）。

添加依賴，在原生Android工程的項目build.gradle中添加如下，這里使用的是相對路徑實際中根據自己的項目調整

在app的build.gradle中添加implementation'com.facebook.react:react-native:+' ,在minifest中添加<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />增加調試菜單頁面

三 、集成

在原生項目中集成RN也有兩種方法

1、直接繼承ReactActvity

用這種方法就跟react native官方文檔中介紹的一樣，我們新建一個Activity集成ReactActivity，重寫Application繼承ReacApplication。代碼如下：

MyReactActivity

MyApplication

getMainComponentName返回的就是js代碼中調用AppRegistry.registerComponent('Test', () => Test);注冊的名字,這樣就OK了。我們來看下效果：

直接繼承ReactActivity

2、自己實現ReactActivity

這里推薦先看這個干貨滿滿，自定義Activity繼承DefaultHardwareBackBtnHandler, PermissionAwareActivity然后添加ReactRootView到

我們的activity中即可，生命周期方法需要重寫。

設置ContentView

重寫生命周期方法

注意onResume中的方法，reactInstanceManager.onHostResume前一個參數接受this， 后一個參數接受物理返回按鍵事件

返回按鍵事件，權限請求重寫

其中keyup重寫是為了能在模擬器上按ctrl+m調出調試菜單。

代碼中的reactInstanceManager使我們定義的JS管理類，因為如果直接繼承ReactActivity的時候ReactActivity內部會到ReactNativeHost中去取reactInstanceManager，而我們是沒有繼承ReactActivity所以我們得自己定義。

reactInstanceManager管理類

其中setJSBUndleFileName就是rn目錄下入口文件的名字(index.android.js),上面代碼的意思是如果是如果是調試模式下那么js代碼就沖入口文件

index.android.js里面取。我們還有調用了setJSBundleFile這個是設置js文件目錄，當不是調試模式的時候就會從這里面取bundle文件

獲取js文件目錄

看下實際運行效果圖：

打開自定義的react activity

四、熱更新

因為js文件路徑是可以由我們自定義的，所以實現熱更新就很簡單了,上面getJSBundleFile中我們先判斷在getReactNativeDir中是否存在bundle

文件，如果有就加載如果沒有就從assets中加載，所以我們把最新bundle文件放到getReactNativeDir中就實現簡單的熱更新了,下面來測試一下。

1、先把reactInstanceManager管理類中builder.setJSMainModulePath("index.android")去掉

2、將bundle文件生成到assets文件夾中，在rn文件下打開命令行運行react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output ../Test/app/src/main/assets/index.android.bundle --assets-dest ../Test/app/src/main/assets 參數大家應該能夠看得懂 dev是否是調試模式，entry-file js的入口文件，bundle-output 生成的bundle文件路徑，assets-dest 資源文件路徑，我這里是將資源文件和bundle文件都生成到Android原生項目中的assets文件夾中了。命令運行成功后再Test項目的assets文件夾下回生成相關文件以及文件夾，

3、點擊Android原生項目中運行按鈕(這里我怕將js中splash頁面的代碼改為不管怎么樣都跳home頁面，所以看不到登錄頁了）。

運行效果圖

上面其實原本是有圖片，但為什么沒有，因為我們打bundle包的時候圖片應該放到res文件夾下，但是我們放到了asset文件夾下了系統找不到

具體的可以看這里，我們可以將assets文件全部拷貝到sd卡中這樣就沒問題了,下面上效果圖：

拷貝assets資源到sd卡

4、更新，我們菜單頁的Test改為Hotfix，將圖片換成紅色的試試，然后打bundle包

? ? 運行命令：react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output ./assets/index.android.bundle --assets-dest ./assets 這次將bundle文件和asset文件就生成在當前目錄,將bundle和資源文件一起壓縮后放到然后將文件壓縮放到手機sd卡根目錄

圖片和bundle壓縮包

5、加載更新文件

熱更新

代碼地址：https://github.com/yaozhukuang/android_rn_demo

參考資料：

react native 實戰系列教程之熱更新原理分析與實現

React-Native 圖片熱更新初探