RN與現有的原生app整合

標籤：檢查   repo   script   with   col   容器   思想   internet   tor   

https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

　　RN可以很好地支援往一個原生的app上添加RN的組件。通過簡單的步驟，我們可以添加RN基礎的特徵、組件等。後面以android為例。

關鍵思想

1. 設定RN的依賴和結構目錄
2. 用JS開發RN組件
3. 添加一個ReactRootView到android app上，這會作為RN組件的容器
4. 開啟RN伺服器和運行原生app
5. 檢查RN組件是否正常工作

預備知識

　　按照官方指引，設定好RN開發環境。

1. 設定目錄結構。把android項目複製到RN項目根目錄下的android檔案夾中（初始化的RN項目中就已經有這樣一個檔案夾了，裡面有初始的android項目內容）
2. 安裝JS依賴。在RN項目建立一個package.json，內容如下（初始的RN項目也有這些內容了）

   {  "name": "MyReactNativeApp",  "version": "0.0.1",  "private": true,  "scripts": {    "start": "node node_modules/react-native/local-cli/cli.js start"  }}

   然後安裝react和react-native依賴

   npm install --save [email protected] react-native

把RN添加到app中配置maven倉庫

　　把RN依賴添加到build.gradle中（如果想使用指定版本的RN，可以將+替換為npm中對應的RN版本號碼）：

dependencies {    compile ‘com.android.support:appcompat-v7:23.0.1‘    ...    compile "com.facebook.react:react-native:+" // From node_modules.}

　　光光以上這麼配置，gradle會（？）找不到這個依賴，需要在build.gradle中配置一個倉庫告訴gradle去哪裡找依賴（確保添加到allproject這個塊中，而且要在所有其他maven倉庫之上。同時確保下面的url是正確的）：

allprojects {    repositories {        maven {            // All of React Native (JS, Android binaries) is installed from npm            url "$rootDir/../node_modules/react-native/android"        }        ...    }    ...}

配置許可權

　　往AndroidManifest.xml資訊清單檔中加上：

<uses-permission android:name="android.permission.INTERNET" />

　　如果需要在原生app中開啟開發人員菜單，也需要在資訊清單檔中加上（如果要發布則把下面這行去掉）：

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

代碼整合

　　

 

RN與現有的原生app整合