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 ，你们有哪模块不懂得能够下载下来看看