傳送門，項目代碼地址github

demo項目說明

該項目是使用ReactNative寫的一個通訊錄管理系統，服務端程序是使用node.js實現的，由于只是一個小demo沒有使用數據庫保存數據，只是使用的json文檔的形式進行數據存儲，使用react-navigation組件來實現tabbar和navigationBar,跳轉到其他到頁面時隱藏底部的tabbar；該項目主要分為四個部分首頁、公告、管理和關于，詳情如下：

首頁

主要展示公司部門，點擊對應的部門進入該部門的通訊錄列表，點擊列表后面的電話或郵件，彈出actionView，可以撥打電話和發送郵件或信息等；

通訊錄列表：

?

撥打電話等：

?

公告頁面

展示發送的所有公告信息列表，點擊可以進入公告詳情頁面；

管理頁面

包過修改密碼、增加聯系人、刪除聯系人、發布公告、退出登錄等；

關于我們

簡單寫了假頁面，以及三個按鈕，可以跳轉到本人的git、sina、csdn，做的不是很好，大家見諒，主要是展示webView的用法；

服務環境說明及啟動

為了配合app，我們使用了一個node.js的服務程序，所以運行服務端程序需要有node環境，這個各位朋友可以自行google安裝，腳本的默認啟動端口是3000，如果運行時被占用，請自行修改server目錄下的app.js腳本,如圖:?

運行服務端腳本

解壓server.zip

打開黑框，切換到server目錄下

執行命令:node app.js (要求已經安裝node.js)

終端出現-------- listening on port: 3000 ------------運行成功

瀏覽器輸入127.0.0.1：3000/test/test測試能否正常訪問

環境配置

app中有很多地方需要實現網絡請求，所以我們寫了一個公共的js文件，管理?

根據服務端腳本的運行情況，設置網絡請求的地址，在service.js中修改host地址，修改為運行服務端腳本的電腦的ip地址和上面設置的端口號，切記不要設置成127.0.0.1：3000，這是在本機電腦上訪問的回環地址，手機訪問是獲取不到數據的，一定要設置成電腦的ip，具體電腦的ip地址獲取方法，請自行查找，應該把手機和電腦連接到同一個局域網中，如果服務端腳本運行在服務器，這里設置是服務器ip或域名：?

運行RN項目

打開reactDemo文件夾，進入ios目錄下，用Xcode打開項目運行到手機上查看效果，可能會出現bundle id被占用的情況，簡單修改再次運行。

補充說明

運行起來的時候登錄的賬號可以使用 user:swhglcat@sina.com?pwd:123456 進行登錄，為了演示刪除用戶時的權限問題，在代碼中判斷了一下用戶名是否是swhglcat@sina.com,當前用戶不是該用戶不能執行刪除操作，你們可以自行修改代碼，或者登錄后可以添加其他用戶，然后用新添加的用戶登錄，執行刪除用戶操作，查看效果。

感謝

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

總結

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

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