快捷導(dǎo)航

如何在原有Android項(xiàng)目中快速集成React Native詳解

更新時(shí)間：2017年12月27日 10:23:47 作者：LittleLiByte

創(chuàng)建一個(gè)React Native項(xiàng)目并寫一個(gè)純的 React Native 應(yīng)用可以參考官方指南。下面這篇文章主要給大家介紹了關(guān)于如何在原有Android項(xiàng)目中快速集成React Native的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。

前言

RN經(jīng)過一段時(shí)間發(fā)展，已經(jīng)有充分?jǐn)?shù)量的人嘗試過了，就我身邊就有幾批，褒貶也不一：

① 做UI快

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

③ 入門簡(jiǎn)單，能讓前端快速開發(fā)App

④ iOS&Android大部分代碼通用

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

......

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

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

NodeJS：選擇對(duì)應(yīng)的系統(tǒng)下載并安裝，安裝完即可在終端運(yùn)行npm 命令。
配置源，眾所周知因?yàn)閴Φ脑颍宰詈门渲脟鴥?nèi)的源。

配置方法如下：

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文件

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

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

{
 "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);

然后，在該目錄下打開終端，運(yùn)行 npm i 命令，安裝React Native 所需的依賴，安裝完成后會(huì)在根目錄下創(chuàng)建node_modules文件夾，下載的依賴就在這個(gè)文件夾下。到此，第一步的工作已經(jīng)完成了。

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

實(shí)際上我們不會(huì)將RN代碼放到Android工程里，因?yàn)樵谝话愕墓卷?xiàng)目中，使用SVN或者Git進(jìn)行管理，客戶端目錄下一般都會(huì)有Android和iOS兩個(gè)目錄區(qū)分兩個(gè)端。而React Native作為一個(gè)跨平臺(tái)的框架，放在Android或者iOS目錄里都不太合適。因此個(gè)人認(rèn)為比較好的做法是在Android和iOS同級(jí)目錄創(chuàng)建一個(gè)ReactNative目錄，放置RN項(xiàng)目的代碼。因此目錄結(jié)構(gòu)大致如下：

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

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

2.在Android項(xiàng)目中配置ReactNative依賴

對(duì)于package.json文件在Android 工程中的情況

首先編輯在項(xiàng)目目錄下build.gradle文件。

allprojects {
 repositories {
  google()
  jcenter()
  //添加這個(gè)倉庫
  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'

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

之所以需要在項(xiàng)目的build.gradle文件中添加maven配置，是因?yàn)锳ndroid項(xiàng)目默認(rèn)的依賴包的源jcenter()并不包含最新版的React Native（它只到0.20.1）。

對(duì)ReactNative獨(dú)立目錄情況

與第一種情況并無太大區(qū)別，只是RN的maven倉庫路徑有所不同。因?yàn)橥ㄟ^版本控制拉取下來的工程位置各有不同，為了避免開發(fā)人員對(duì)項(xiàng)目目錄下的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')
  }
 }
}

其中l(wèi)ocal.properties文件不需要提交版本控制，并在其中添加一個(gè)reactnative.dir屬性，屬性值為RN的android工程目錄路徑，例如在我的項(xiàng)目中

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

3.創(chuàng)建RN視圖承載的Activity或Fragment

創(chuàng)建RN視圖承載的Activity

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

創(chuàng)建RN視圖承載的Fragment

與Activity不同,在Fragment中加載RN有點(diǎn)不一樣。但在Android中加載RN，無論是在Activity還是Fragment，加載的都只是一個(gè)View而已。而給Fragment設(shè)置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 ，實(shí)現(xiàn) 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，添加相應(yīng)的權(quán)限以及Activity聲明

RN需要添加以下權(quán)限：

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

除了聲明自定義的Activity，還需要添加DevSettingsActivity，用來修改RN的相關(guān)設(shè)置。

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

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

6.調(diào)試

要調(diào)試首先需要啟動(dòng)RN的本地服務(wù)器。在package.json文件所在目錄打開終端，運(yùn)行react-native start命令即可啟動(dòng)本地服務(wù)器。然后安裝并運(yùn)行App。

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

之后就可以愉快的調(diào)試運(yùn)行了。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: