在做項(xiàng)目之前，首先要把React Native 的環(huán)境搭建好，這里我就不多做闡述议双，RN中文網(wǎng)步驟說的挺清楚的，就跟著配置就好捉片。
reactnative.cn/docs/0.49/getting-started.html
一平痰、總頁面的基本架構(gòu)
剛開始做項(xiàng)目的時(shí)候，頁面跳轉(zhuǎn)用的路由我選擇的是Navigator伍纫，但是在RN0.44發(fā)布的時(shí)將之前一直存在的Navigator廢棄了宗雇。所以真機(jī)測(cè)試時(shí)底部一直會(huì)彈出組件過時(shí)的警告，這讓我很頭疼莹规，后來我找到了今年1月剛推出的react-navigation赔蒲，facebook推薦使用的新導(dǎo)航組件。
總的來說,react-navigation有三部分組成
1.StackNavigator: 類似與html里a標(biāo)簽功能，用于頁面之間的切換
2.TabNavigator: 相當(dāng)于iOS里面的TabBarController舞虱，屏幕下方的標(biāo)簽欄
3.DrawerNavigator: 抽屜效果欢际，側(cè)邊滑出
用法都挺簡(jiǎn)單，官網(wǎng)都有api介紹矾兜，主要這里我想講一下整個(gè)app如何嵌套這三個(gè)導(dǎo)航組件损趋。
有人推薦可以這樣嵌套
1.StackNavigator
2.??? - TabNavigator
3.??????? - DrawerNavigator
（ 官方文檔中關(guān)于DrawerNavigator最后有這樣一句話：
Please bear in mind that if you nest the DrawerNavigation, the drawer will show below the parent navigation. 如果按上面那樣實(shí)現(xiàn)嵌套的話，側(cè)邊欄的滑動(dòng)導(dǎo)航高度不會(huì)占全屏椅寺，StackNavigator的頂欄會(huì)占去一部分高度浑槽，drawer是在stack下面的）
經(jīng)過多次嘗試后，我總結(jié)出來的嵌套方法是：
1.DrawerNavigator
2.? ? -StackNavigator
3.? ? ? ? -TabNavigator
側(cè)邊欄里包裹整個(gè)app組件返帕，以及其他側(cè)邊欄其他功能組件
整個(gè)app組件里包裹著底部導(dǎo)航欄組件桐玻，以及在四個(gè)導(dǎo)航欄所關(guān)聯(lián)的頁面上所能點(diǎn)擊跳轉(zhuǎn)到的頁面都放進(jìn)這個(gè)StackNavigator里
底部導(dǎo)航欄組件，包括四個(gè)關(guān)聯(lián)的頁面
二荆萤、課程表app中用到的一些第三方組件
（1）推薦頁面
1.輪播圖react-native-swiper github.com/leecade/react-native-swiper?
部分代碼
2.側(cè)滑刪除畸冲，修改 react-native-swipeout github.com/dancormier/react-native-swipeout
3.視頻播放 react-native-video github.com/react-native-community/react-native-video
代碼過于復(fù)雜，可以看看我寫的項(xiàng)目github.com/ouxiaojie18/ClassTable-react 也可以在react-native-video的github上學(xué)習(xí)他的example
（2）樹洞頁面
1.圖片點(diǎn)擊放大查看 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能把頁面分成一個(gè)個(gè)格子
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.好友聯(lián)系列表 首字母a-z排序? react-native-alphabetlistview www.npmjs.com/package/react-native-alphabetlistview
3.聊天功能 react-native-gifted-chat 功能挺強(qiáng)大的梧油，支持語音、視頻州邢，圖片等?github.com/FaridSafi/react-native-gifted-chat
（5）其他
1.moment 一個(gè)非常好用的儡陨，用于修改時(shí)間格式的庫，還能進(jìn)行日期時(shí)間加減等操作
2.react-native-vector-icons?github.com/oblador/react-native-vector-icons? 可以直接使用圖片名就能加載圖片的第三方,類似于web的iconfont矢量圖量淌，使用很方便, 你不需要在工程文件夾里塞各種圖片, 節(jié)省很多空間,
三骗村、以Express框架做后端
這個(gè)app是以node.js的express框架做后端，要搭建node環(huán)境呀枢，這里有步驟：jingyan.baidu.com/article/73c3ce28f34b8ce50243d95e.html
全局安裝express：
在demo文件夾里用express創(chuàng)建個(gè)名為service的服務(wù)端項(xiàng)目
進(jìn)入service目錄胚股，安裝相關(guān)依賴：
最后開啟服務(wù)：
在瀏覽器上輸入localhost:3000，會(huì)出現(xiàn)下圖說明運(yùn)行成功：
安裝個(gè)模塊裙秋，自動(dòng)監(jiān)聽：
用supervisor啟動(dòng)項(xiàng)目：
這樣服務(wù)就創(chuàng)建好了琅拌，具體后端代碼就不貼啦~
具體的項(xiàng)目在我的github上github.com/ouxiaojie18/ClassTable-react?，大家有哪模塊不懂得可以下載下來看看
