React Native+Node.js 开发的课程表app项目笔记
在做项目之前,首先要把React Native 的环境搭建好,这里我就不多做阐述,RN中文网步骤说的挺清楚的,就跟着配置就好。
http://reactnative.cn/docs/0....
一、总页面的基本架构
刚开始做项目的时候,页面跳转用的路由我选择的是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.- TabNavigator3. - 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.-StackNavigator3.-TabNavigator
侧边栏里包裹整个app组件,以及其他侧边栏其他功能组件
整个app组件里包裹着底部导航栏组件,以及在四个导航栏所关联的页面上所能点击跳转到的页面都放进这个StackNavigator里
底部导航栏组件,包括四个关联的页面
二、课程表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矢量图,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,
三、以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 ,大家有哪模块不懂得可以下载下来看看
React Native+Node.js 开发的课程表app项目笔记相关推荐
- 《Node.js开发指南》MicroBlog项目的问题汇总
重要说明:本博已迁移到 石佳劼的博客,有疑问请到 文章新地址 留言!!! 最近对Node产生了点兴趣,就看了<Node.js开发指南>一书,按照书中的例子敲完了所有代码.书是好书,非常适合 ...
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(一)
这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)
前篇 使用React.Node.js.MongoDB.Socket.IO开发一个角色投票应用的学习过程(一) 使用React.Node.js.MongoDB.Socket.IO开发一个角色投票应用的学 ...
- 区块链】利用Node.js开发与合约交互的Web界面
区块链]利用Node.js开发与合约交互的Web界面 2018-03-11 16:10:37 宣之于口 阅读数 6128 收藏 更多 分类专栏: 区块链 区块链学习笔记 版权声明:本文为博主原创文章 ...
- Koa与Node.js开发实战(1)——Koa安装搭建(视频演示)
2019独角兽企业重金招聘Python工程师标准>>> 学习架构: 由于Koa2已经支持ES6及更高版本,包括支持async方法,所以请读者保证Node.js版本在7.6.0以上.如 ...
- 教你如何用node.js开发微信公众号(一)
内容简介 本文章简单介绍了如何用node.js开发微信公众号.主要内容包括微信公众平台的配置,signature的验证,以及用node.js去处理用户主动发起的行为. 准备工作 开发前需要安装好nod ...
- React Native之js调用Android原生使用Callback传递结果给js
如果不清楚js如何调用Android原生,可以先参考我的这篇博客React Native实现js调用安卓原生代码 1 问题 上面的文章只是调用安卓原生显示Toast,但是我们一般会需要调用安卓的代码然 ...
- 先进技术android,React Native实战(JavaScript开发iOS和Android应用)/计算机科学先进技术译丛...
导语 内容提要 本书作者Nader Dabit是AWS Mobile开发人员.React Native Training创始人和React Native Radio播客主持人.本书旨在帮助iOS.An ...
- react apollo_Apollo GraphQL:如何使用React和Node Js构建全栈应用
react apollo Apollo Client is a complete state management library for JavaScript apps. It's a powerf ...
最新文章
- 图像处理(四)图像分割(2)测地距离Geodesic图割
- SpringBoot启动过程详解
- ubuntu基于apache+postgresql编译安装zabbix
- 实现 通过数据库里一个字段值相等 则把 他合为一条数据
- 一个人幸运的前提,是他有能力改变自己
- Windows下根据进程id获得进程名
- 房产证是不是必须房贷还完才可以拿回来?
- 贡献十本经典的java教程,都是pdf完整版
- RegCleanPro (微软认证-注册表清理软件)
- 《沧浪之水》:现实从来不怕谁倔犟
- 【FLUENT】【VOF】液滴铺展问题模拟示例
- sails 数据库字段
- 标签云的实现(使用jQuery插件jqcloud)
- phpstudy安装和使用
- java怎么实现复制粘贴的操作,java简单实现复制 粘贴 剪切功能代码分享
- mysql columns表_mysql8 参考手册-INFORMATION_SCHEMA COLUMNS表
- (信贷风控七)申请评分卡模型Python实现(图文+代码实现)
- ISCSI HBA卡和普通网卡的区别
- Google天气接口
- 河南省商丘市谷歌高清卫星地图下载