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

前言

對於現有的大多數項目來講都不是從頭構建的，而要在原有項目的基礎上引入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便可。以後就能夠愉快的調試運行了。