【移動(dòng)應(yīng)用開發(fā)技術(shù)】在原有Android項(xiàng)目中快速集成React Native詳解

【移動(dòng)應(yīng)用開發(fā)技術(shù)】在原有Android項(xiàng)目中快速集成ReactNative詳解

這篇文章給大家分享的是有關(guān)在原有Android項(xiàng)目中快速集成ReactNative詳解的內(nèi)容。在下覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過來看看吧。前言RN經(jīng)過一段時(shí)間發(fā)展，已經(jīng)有充分?jǐn)?shù)量的人嘗試過了，就我身邊就有幾批，褒貶也不一：①做UI快②還是有很多限制，不如原生Native③入門簡單，能讓前端快速開發(fā)App④iOS&Android大部分代碼通用⑤code-push能做熱更新，但是用不好依舊坑在得到一些信息后，可以看出，要用RN高效率的做出比較不錯(cuò)的App是有可能的，單看投入度與最初設(shè)計(jì)是否合理，而且現(xiàn)在關(guān)于ReactNative的各種文檔是相當(dāng)豐富的，所以這個(gè)階段想切入RN可能是一個(gè)不錯(cuò)的選擇。眾所周知對于現(xiàn)有的大多數(shù)項(xiàng)目來說都不是從頭構(gòu)建的，而要在原有項(xiàng)目的基礎(chǔ)上引入ReactNative則肯定和用react-nativeinitxxx創(chuàng)建工程不同。因此下面就來說下具體操作。不過在真正開始之前還是要先說明一下工具配置。NodeJS：選擇對應(yīng)的系統(tǒng)下載并安裝，安裝完即可在終端運(yùn)行npm命令。配置源，眾所周知因?yàn)閴Φ脑?，所以最好配置國?nèi)的源。配置方法如下：npm

config

set

registry

--global

npm

config

set

disturl

/dist

--global1.加入package.json文件以及index.android.js文件一般地，我們可以在項(xiàng)目根目錄下創(chuàng)建package.json文件以及index.android.js文件。package.json文件類似與Android中的build.gradle文件，在其中主要配置了ReactNative所需的依賴庫以及一些腳本語句。以下的代碼可以看作是一個(gè)package.json文件的模版,版本號可以根據(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)行npmi命令，安裝ReactNative所需的依賴，安裝完成后會(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è)端。而ReactNative作為一個(gè)跨平臺的框架，放在Android或者iOS目錄里都不太合適。因此個(gè)人認(rèn)為比較好的做法是在Android和iOS同級目錄創(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)行npmi命令，安裝ReactNative所需的依賴，而node_modules文件夾也自然會(huì)在該文件夾內(nèi)創(chuàng)建。2.在Android項(xiàng)目中配置ReactNative依賴對于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文件，添加ReactNative依賴。implementation

'com.facebook.react:react-native:0.50.3'注意：該版本號需要與package.json文件中配置的RN版本號保持一致。之所以需要在項(xiàng)目的build.gradle文件中添加maven配置，是因?yàn)锳ndroid項(xiàng)目默認(rèn)的依賴包的源jcenter()并不包含最新版的ReactNative（它只到0.20.1）。對ReactNative獨(dú)立目錄情況與第一種情況并無太大區(qū)別，只是RN的maven倉庫路徑有所不同。因?yàn)橥ㄟ^版本控制拉取下來的工程位置各有不同，為了避免開發(fā)人員對項(xiàng)目目錄下的build.gradle文件編輯沖突，推薦使用如下方式：//加載perties配置

Properties

properties

=

new

Properties()

InputStream

inputStream

=

project.rootProject.file('perties').newDataInputStream();

properties.load(inputStream)

allprojects

{

repositories

{

jcenter()

maven

{

//

All

of

React

Native

(JS,

Android

binaries)

is

installed

from

npm

url

properties.getProperty('reactnative.dir')

}

}

}其中perties文件不需要提交版本控制，并在其中添加一個(gè)reactnative.dir屬性，屬性值為RN的android工程目錄路徑，例如在我的項(xiàng)目中reactnative.dir=/Users/littlebyte/svn/ReactNative/ReactNative/node_modules/react-native/android3.創(chuàng)建RN視圖承載的Activity或Fragment創(chuàng)建RN視圖承載的Activitypublic

class

MyReactActivity

extends

ReactActivity

{

@Override

protected

String

getMainComponentName()

{

//該返回值需要與N程序的入口文件index.android.js中的注冊的名字相同

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)限