這篇文章給大家分享的是有關(guān)在原有Android項(xiàng)目中快速集成React Native詳解的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)公司專注于招遠(yuǎn)企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站制作。招遠(yuǎn)網(wǎng)站建設(shè)公司,為招遠(yuǎn)等地區(qū)提供建站服務(wù)。全流程按需制作,專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)前言
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)于React Native的各種文檔是相當(dāng)豐富的,所以這個(gè)階段想切入RN可能是一個(gè)不錯(cuò)的選擇。
眾所周知對于現(xiàn)有的大多數(shù)項(xiàng)目來說都不是從頭構(gòu)建的,而要在原有項(xiàng)目的基礎(chǔ)上引入React Native則肯定和用react-native init xxx創(chuàng)建工程不同。因此下面就來說下具體操作。不過在真正開始之前還是要先說明一下工具配置。
NodeJS:選擇對應(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同級目錄創(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依賴
對于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)。
對ReactNative獨(dú)立目錄情況
與第一種情況并無太大區(qū)別,只是RN的maven倉庫路徑有所不同。因?yàn)橥ㄟ^版本控制拉取下來的工程位置各有不同,為了避免開發(fā)人員對項(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中的注冊的名字相同 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)行了。
感謝各位的閱讀!關(guān)于“在原有Android項(xiàng)目中快速集成React Native詳解”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
分享名稱:在原有Android項(xiàng)目中快速集成ReactNative詳解-創(chuàng)新互聯(lián)
網(wǎng)站路徑:http://muchs.cn/article18/dhepdp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)建站、面包屑導(dǎo)航、全網(wǎng)營銷推廣、定制網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容