在原有Android項目中快速集成React Native詳解

這篇文章給大家分享的是有關在原有Android項目中快速集成React Native詳解的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

前言

RN經過一段時間發展，已經有充分數量的人嘗試過了，就我身邊就有幾批，褒貶也不一：

① 做UI快

② 還是有很多限制，不如原生Native

③ 入門簡單，能讓前端快速開發App

④ iOS&Android大部分代碼通用

⑤ code-push能做熱更新，但是用不好依舊坑

......

在得到一些信息后，可以看出，要用RN高效率的做出比較不錯的App是有可能的，單看投入度與最初設計是否合理，而且現在關于React Native的各種文檔是相當豐富的，所以這個階段想切入RN可能是一個不錯的選擇。

眾所周知對于現有的大多數項目來說都不是從頭構建的，而要在原有項目的基礎上引入React Native則肯定和用react-native init xxx創建工程不同。因此下面就來說下具體操作。不過在真正開始之前還是要先說明一下工具配置。

• NodeJS：選擇對應的系統下載并安裝，安裝完即可在終端運行npm 命令。

• 配置源，眾所周知因為墻的原因，所以最好配置國內的源。

配置方法如下：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

1.加入package.json文件以及index.android.js文件

一般地，我們可以在項目根目錄下創建package.json文件以及index.android.js文件。

package.json文件類似與Android中的build.gradle文件，在其中主要配置了React Native所需的依賴庫以及一些腳本語句。以下的代碼可以看作是一個package.json文件的模版,版本號可以根據需要而定。

{
 "name": "XXX",
 "version": "0.0.1",
 "private": true,
 "scripts": {
 "start": "node node_modules/react-native/local-cli/cli.js start",
 "test": "jest"
 },
 "dependencies": {
 "react": "16.0.0",
 "react-native": "0.50.3",
 "react-native-device-info": "^0.12.1"
 },
 "devDependencies": {
 "babel-jest": "21.2.0",
 "babel-preset-react-native": "4.0.0",
 "jest": "21.2.1",
 "react-test-renderer": "16.0.0"
 },
 "jest": {
 "preset": "react-native"
 }
}

index.android.js 文件是RN程序的入口文件。通常index.android.js 文件如下：

import React,{Component} from 'react';
import {
 AppRegistry,View,Text,
} from 'react-native';

class App extends Component{
 //...其他方法
 render(){
  return(
   <View>
    <Text>this is React Native Page</Text>
   </View>
  );
 }
  //...其他方法
}
AppRegistry.registerComponent('XXX', () => App);

然后，在該目錄下打開終端，運行 npm i 命令，安裝React Native 所需的依賴，安裝完成后會在根目錄下創建node_modules文件夾，下載的依賴就在這個文件夾下。到此，第一步的工作已經完成了。

-----分割線------

實際上我們不會將RN代碼放到Android工程里，因為在一般的公司項目中，使用SVN或者Git進行管理，客戶端目錄下一般都會有Android和iOS兩個目錄區分兩個端。而React Native作為一個跨平臺的框架，放在Android或者iOS目錄里都不太合適。因此個人認為比較好的做法是在Android和iOS同級目錄創建一個ReactNative目錄，放置RN項目的代碼。因此目錄結構大致如下：

.
├──Android
 ├──trunk
 ├──branches
 └──tags 
├──iOS  
 ├──trunk
 ├──branches
 └──tags      
└──ReactNative 
 ├──trunk
 ├──branches
 └──tags

此時，RN項目的代碼包括package.json文件以及index.android.js文件都是在trunk目錄下，自然地，需要在trunk目錄打開終端，運行運行 npm i 命令，安裝React Native 所需的依賴，而node_modules文件夾也自然會在該文件夾內創建。

2.在Android項目中配置ReactNative依賴

對于package.json文件在Android 工程中的情況

首先編輯在項目目錄下build.gradle文件。

allprojects {
 repositories {
  google()
  jcenter()
  //添加這個倉庫
  maven {
   // All of React Native (JS, Android binaries) is installed from npm
   url "$rootDir/node_modules/react-native/android"
  }
 }
}

然后在編輯app目錄下的build.gradle文件，添加React Native依賴。

implementation 'com.facebook.react:react-native:0.50.3'

注意：該版本號需要與package.json文件中配置的RN版本號保持一致。

之所以需要在項目的build.gradle文件中添加maven配置，是因為Android項目默認的依賴包的源jcenter()并不包含最新版的React Native（它只到0.20.1）。

對ReactNative獨立目錄情況

與第一種情況并無太大區別，只是RN的maven倉庫路徑有所不同。因為通過版本控制拉取下來的工程位置各有不同，為了避免開發人員對項目目錄下的build.gradle文件編輯沖突，推薦使用如下方式：

//加載local.properties配置
Properties properties = new Properties()
InputStream inputStream = project.rootProject.file('local.properties').newDataInputStream();
properties.load(inputStream)
allprojects {
 repositories {
  jcenter()
  maven {
   // All of React Native (JS, Android binaries) is installed from npm
   url properties.getProperty('reactnative.dir')
  }
 }
}

其中local.properties文件不需要提交版本控制，并在其中添加一個reactnative.dir屬性，屬性值為RN的android工程目錄路徑，例如在我的項目中

reactnative.dir=/Users/littlebyte/svn/ReactNative/ReactNative/node_modules/react-native/android

3.創建RN視圖承載的Activity或Fragment

創建RN視圖承載的Activity

public class MyReactActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
 //該返回值需要與N程序的入口文件index.android.js中的注冊的名字相同
 return "XXX";
}
}

創建RN視圖承載的Fragment

與Activity不同,在Fragment中加載RN有點不一樣。但在Android中加載RN，無論是在Activity還是Fragment，加載的都只是一個View而已。而給Fragment設置View，只需要Fragment的onCreateView返回RN的View即可。代碼如下：

public class MyFragment extends Fragment {
  public static final String COMPONENT_NAME = "MyFragment";
  private ReactRootView mReactRootView;
  @Override
  public void onAttach(Context context) {
    super.onAttach(context);
    mReactRootView = new ReactRootView(context);
    mReactRootView.startReactApplication(
        getReactNativeHost().getReactInstanceManager(),
        COMPONENT_NAME,
        null);
  }
  @Nullable
  @Override
  public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    super.onCreateView(inflater, container, savedInstanceState);
    return mReactRootView;
  }
  @Override
  public void onDestroy() {
    super.onDestroy();
    if (mReactRootView != null) {
      mReactRootView.unmountReactApplication();
      mReactRootView = null;
    }
    if (getReactNativeHost().hasInstance()) {
      getReactNativeHost().getReactInstanceManager().onHostDestroy(getActivity()
      );
    }
  }
  protected ReactNativeHost getReactNativeHost() {
    return ((ReactApplication) getActivity().getApplication()).getReactNativeHost();
  }
  public ReactInstanceManager getReactInstanceManager() {
    return getReactNativeHost().getReactInstanceManager();
  }
}

而后Fragment該怎么用就怎么用。

4.修改Application

修改自定義的 Application ，實現 ReactApplication 接口。

public class MainApplication extends Application implements ReactApplication {
  public 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
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
}

5.修改Application，添加相應的權限以及Activity聲明

RN需要添加以下權限：

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

除了聲明自定義的Activity，還需要添加DevSettingsActivity，用來修改RN的相關設置。

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

至此，Android原生項目集成RN的工作就基本完成了。

6.調試

要調試首先需要啟動RN的本地服務器。在package.json文件所在目錄打開終端，運行react-native start命令即可啟動本地服務器。然后安裝并運行App。

如果使用模擬器調試則可以直接運行打開RN的頁面，而如果使用真機調試還需要搖一搖彈出設置菜單，點擊Dev Settings，設置Debug server host&port for device,填入你電腦的ip:8081即可。

之后就可以愉快的調試運行了。

感謝各位的閱讀！關于“在原有Android項目中快速集成React Native詳解”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！