React Native+Node.js 開發的課程表app項目筆記

在作項目以前，首先要把React Native 的環境搭建好，這裏我就很少作闡述，RN中文網步驟說的挺清楚的，就跟着配置就好。

http://reactnative.cn/docs/0....
1、總頁面的基本架構

剛開始作項目的時候，頁面跳轉用的路由我選擇的是Navigator，可是在RN0.44發佈的時將以前一直存在的Navigator廢棄了。因此真機測試時底部一直會彈出組件過期的警告，這讓我很頭疼，後來我找到了今年1月剛推出的react-navigation，facebook推薦使用的新導航組件。

總的來講,react-navigation有三部分組成

1.StackNavigator: 相似與html裏a標籤功能，用於頁面之間的切換

2.TabNavigator: 至關於iOS裏面的TabBarController，屏幕下方的標籤欄

3.DrawerNavigator: 抽屜效果，側邊滑出

用法都挺簡單，官網都有api介紹，主要這裏我想講一下整個app如何嵌套這三個導航組件。

有人推薦能夠這樣嵌套

1.StackNavigator

2.- TabNavigator

   3. - DrawerNavigator

（ 官方文檔中關於DrawerNavigator最後有這樣一句話：

Please bear in mind that if you nest the DrawerNavigation, the drawer will show below the parent navigation. 若是按上面那樣實現嵌套的話，側邊欄的滑動導航高度不會佔全屏，StackNavigator的頂欄會佔去一部分高度，drawer是在stack下面的）

通過屢次嘗試後，我總結出來的嵌套方法是：

1.DrawerNavigator

2.-StackNavigator
    3.-TabNavigator

側邊欄裏包裹整個app組件，以及其餘側邊欄其餘功能組件

整個app組件裏包裹着底部導航欄組件，以及在四個導航欄所關聯的頁面上所能點擊跳轉到的頁面都放進這個StackNavigator裏

底部導航欄組件，包括四個關聯的頁面

2、課程表app中用到的一些第三方組件
（1）推薦頁面

1.輪播圖react-native-swiper github.com/leecade/react-native-swiper
部分代碼

2.側滑刪除，修改 react-native-swipeout github.com/dancormier/react-native-swipeout


3.視頻播放 react-native-video github.com/react-native-community/react-native-video

代碼過於複雜，能夠看看我寫的項目github.com/ouxiaojie18/ClassTable-react 也能夠在react-native-video的github上學習他的example
（2）樹洞頁面

1.圖片點擊放大查看 react-native-zoom-image github.com/Tinysymphony/react-native-zoom-image

（3）課程表頁面

1.課程表 react-native-easy-grid github.com/GeekyAnts/react-native-easy-grid 佈局神器，grid、col、row能把頁面分紅一個個格子


2.拍照功能 react-native-image-picker github.com/react-community/react-native-image-picker

3.七牛存圖片 react-native-qiniu github.com/buhe/react-native-qiniu
（4）小紙條頁面

1.圖片毛玻璃效果 react-native-blur github.com/react-native-community/react-native-blur

2.好友聯繫列表 首字母a-z排序 react-native-alphabetlistview www.npmjs.com/package/react-native-alphabetlistview

3.聊天功能 react-native-gifted-chat 功能挺強大的，支持語音、視頻，圖片等 github.com/FaridSafi/react-native-gifted-chat

（5）其餘

1.moment 一個很是好用的，用於修改時間格式的庫，還能進行日期時間加減等操做

2.react-native-vector-icons github.com/oblador/react-native-vector-icons 能夠直接使用圖片名就能加載圖片的第三方,相似於web的iconfont矢量圖，使用很方便, 你不須要在工程文件夾裏塞各類圖片, 節省不少空間,

3、以Express框架作後端

這個app是以node.js的express框架作後端，要搭建node環境，這裏有步驟：jingyan.baidu.com/article/73c3ce28f34b8ce50243d95e.html

全局安裝express：

在demo文件夾裏用express建立個名爲service的服務端項目

進入service目錄，安裝相關依賴：

最後開啓服務：

在瀏覽器上輸入localhost:3000，會出現下圖說明運行成功：

安裝個模塊，自動監聽：

用supervisor啓動項目：

這樣服務就建立好了，具體後端代碼就不貼啦~

具體的項目在個人github上github.com/ouxiaojie18/ClassTable-react ，你們有哪模塊不懂得能夠下載下來看看