前言

對于現有的大多數項目來說都不是從頭構建的，而要在原有項目的基礎上引入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 npmurl "$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 npmurl 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;@Overridepublic void onAttach(Context context) {super.onAttach(context);mReactRootView = new ReactRootView(context);mReactRootView.startReactApplication(getReactNativeHost().getReactInstanceManager(),COMPONENT_NAME,null);}@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {super.onCreateView(inflater, container, savedInstanceState);return mReactRootView;}@Overridepublic 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) {@Overridepublic boolean getUseDeveloperSupport() {return BuildConfig.DEBUG;}@Overrideprotected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage());}};@Overridepublic 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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。