傳送門(mén)，項(xiàng)目代碼地址github

demo項(xiàng)目說(shuō)明

該項(xiàng)目是使用ReactNative寫(xiě)的一個(gè)通訊錄管理系統(tǒng)，服務(wù)端程序是使用node.js實(shí)現(xiàn)的，由于只是一個(gè)小demo沒(méi)有使用數(shù)據(jù)庫(kù)保存數(shù)據(jù)，只是使用的json文檔的形式進(jìn)行數(shù)據(jù)存儲(chǔ)，使用react-navigation組件來(lái)實(shí)現(xiàn)tabbar和navigationBar,跳轉(zhuǎn)到其他到頁(yè)面時(shí)隱藏底部的tabbar；該項(xiàng)目主要分為四個(gè)部分首頁(yè)、公告、管理和關(guān)于，詳情如下：

首頁(yè)

主要展示公司部門(mén)，點(diǎn)擊對(duì)應(yīng)的部門(mén)進(jìn)入該部門(mén)的通訊錄列表，點(diǎn)擊列表后面的電話或郵件，彈出actionView，可以撥打電話和發(fā)送郵件或信息等；

通訊錄列表：

?

撥打電話等：

?

公告頁(yè)面

展示發(fā)送的所有公告信息列表，點(diǎn)擊可以進(jìn)入公告詳情頁(yè)面；

管理頁(yè)面

包過(guò)修改密碼、增加聯(lián)系人、刪除聯(lián)系人、發(fā)布公告、退出登錄等；

關(guān)于我們

簡(jiǎn)單寫(xiě)了假頁(yè)面，以及三個(gè)按鈕，可以跳轉(zhuǎn)到本人的git、sina、csdn，做的不是很好，大家見(jiàn)諒，主要是展示webView的用法；

服務(wù)環(huán)境說(shuō)明及啟動(dòng)

為了配合app，我們使用了一個(gè)node.js的服務(wù)程序，所以運(yùn)行服務(wù)端程序需要有node環(huán)境，這個(gè)各位朋友可以自行g(shù)oogle安裝，腳本的默認(rèn)啟動(dòng)端口是3000，如果運(yùn)行時(shí)被占用，請(qǐng)自行修改server目錄下的app.js腳本,如圖:?

運(yùn)行服務(wù)端腳本

解壓server.zip

打開(kāi)黑框，切換到server目錄下

執(zhí)行命令:node app.js (要求已經(jīng)安裝node.js)

終端出現(xiàn)-------- listening on port: 3000 ------------運(yùn)行成功

瀏覽器輸入127.0.0.1：3000/test/test測(cè)試能否正常訪問(wèn)

環(huán)境配置

app中有很多地方需要實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求，所以我們寫(xiě)了一個(gè)公共的js文件，管理?

根據(jù)服務(wù)端腳本的運(yùn)行情況，設(shè)置網(wǎng)絡(luò)請(qǐng)求的地址，在service.js中修改host地址，修改為運(yùn)行服務(wù)端腳本的電腦的ip地址和上面設(shè)置的端口號(hào)，切記不要設(shè)置成127.0.0.1：3000，這是在本機(jī)電腦上訪問(wèn)的回環(huán)地址，手機(jī)訪問(wèn)是獲取不到數(shù)據(jù)的，一定要設(shè)置成電腦的ip，具體電腦的ip地址獲取方法，請(qǐng)自行查找，應(yīng)該把手機(jī)和電腦連接到同一個(gè)局域網(wǎng)中，如果服務(wù)端腳本運(yùn)行在服務(wù)器，這里設(shè)置是服務(wù)器ip或域名：?

運(yùn)行RN項(xiàng)目

打開(kāi)reactDemo文件夾，進(jìn)入ios目錄下，用Xcode打開(kāi)項(xiàng)目運(yùn)行到手機(jī)上查看效果，可能會(huì)出現(xiàn)bundle id被占用的情況，簡(jiǎn)單修改再次運(yùn)行。

補(bǔ)充說(shuō)明

運(yùn)行起來(lái)的時(shí)候登錄的賬號(hào)可以使用 user:swhglcat@sina.com?pwd:123456 進(jìn)行登錄，為了演示刪除用戶時(shí)的權(quán)限問(wèn)題，在代碼中判斷了一下用戶名是否是swhglcat@sina.com,當(dāng)前用戶不是該用戶不能執(zhí)行刪除操作，你們可以自行修改代碼，或者登錄后可以添加其他用戶，然后用新添加的用戶登錄，執(zhí)行刪除用戶操作，查看效果。

感謝

感謝王麗華、魏曉軍、馮誠(chéng)祺的《React Native入門(mén)與實(shí)戰(zhàn)》這本書(shū)對(duì)我在RN學(xué)習(xí)上的幫助，不過(guò)這本書(shū)現(xiàn)講的跟現(xiàn)在的RN版本和編程方式有了很大的語(yǔ)法差異，但是原理相同，大家可以自行查找其他資料學(xué)習(xí)；最后感謝網(wǎng)絡(luò)上的各位大神提供的學(xué)習(xí)資料，感謝google，以后我也將會(huì)更加努力的學(xué)習(xí)，爭(zhēng)取跟大家共同學(xué)習(xí)，也希望有什么做的不好的，或者不對(duì)的地方，大神能夠批評(píng)指正，我一定會(huì)虛心學(xué)習(xí)，感激不盡的。

總結(jié)

以上是生活随笔為你收集整理的ReactNative配合node.js实现的公司通讯录管理app的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。