react native天气项目
来源:互联网 发布:moxa串口调试 linux 编辑:程序博客网 时间:2024/05/21 12:46
学习ReactNative有一段时间了,于是开发了一个简单的天气应用练练手,欢迎大家fllow和star http://www.jianshu.com/p/95b44212863e
项目地址:https://github.com/nickming/ReactWeather
ReactWeather
基于ReactNative的简单展示天气的应用,下图是部分在iphone上运行效果,后续再Android上的运行效果会后续补充。
Inspiration
作为一个android开发者,一直对ReactNative开发有一定的兴趣,趁着刚好有时间,学习了一下reactnative开发。一般在学习一个平台的应用开发时,总是习惯开发一个天气应用,于是便有了这个ReactWeather应用。该应用只是简单地实现了天气展示功能,并没有做太多的其他功能,有些功能还在开发当中,有时间会继续开发。
Framework
- 虽说也学习了redux架构,但是觉得redux比较笨重,因而采用了比较轻便的Mobx架构,后续会学习dva架构,据说会更好用
- 导航运用了ReactNavigation,由于官方推荐使用此框架,于是学习了一下,的确方便好用
- 侧边栏使用了react-native-drawer-layout,同时支持Android和IOS平台,用法和AndroidDrawerLayout一样
- 项目主要是天气展示部分分得比较细致,其他部分由于还没有完工,所以会慢慢补充并且重构
- 城市选择运用了react-native-city-select,比较好的一个已经实现的城市选择界面
- 数据持久化运用了react-native-storage,考虑到这个应用并比较轻型,所以没有选择使用slqite数据库,只是做了一些缓存的记录和城市的存储
- 图标主要采用了react-native-vector-icons,这个库很好用,基本上两个平台上主流的矢量图标都存在
- 滑动删除使用了react-native-swipeout,这是一个在RN平台上实现比较好的滑动删除库
- 默认使用了RN自己实现的定位功能
API
- 天气api使用了和风天气提供的免费接口
- 壁纸采用了bing壁纸,这是一个哥们自己实现的bing壁纸接口,后续会完善这个接口,让app能够显示更多的壁纸
Progress
Finished
- [x] 实现了定位功能
- [x] 实现了每日壁纸自动更新
- [x] 实现了下拉刷新天气
- [x] 实现了添加城市
- [x] 实现了滑动删除城市
To do
- [ ] 适配好Android平台
- [ ] 现基于Realm的数据持久化
- [ ] 实现动态背景或者天气壁纸的动态更换
- [ ] 实现语音播报天气和图表显示天气信息
- [ ] 现语音播报天气
- [ ] 实现分享天气功能以及推送功能
- [ ] 暂时还没想粗来,走一步看一步吧。。。
Clone & install
- Clone this repo
git clone git@github.com:nickming/ReactWeather.git
cd ReactWeather
- run
npm install
IOS & ANDROID
在根目录执行React-native run-iOS 或者react-native run-android
License
Released under the MIT License.
Feedback
欢迎反馈,欢迎issue和star
阅读全文
0 0
- react native天气项目
- android 开发的8/365 React-native 之 俊哥天气项目学习
- react-native 简天气——仅仅一个天气而已
- 运行React-Native项目
- React-native项目改包名
- 创建React Native项目
- react native项目创建
- React Native实战项目
- 创建react-native项目
- 新建react native 项目
- React Native项目建立
- react-native 项目学习
- React Native项目结构
- React native 创建IOS项目
- React-Native的项目总结
- React Native开源项目
- React Native 集成到已有项目
- 2、React-Native项目调试
- SeaSar2之通过自动注入的方式管理Bean-yellowcong
- 什么是Docker
- 了解数据库事务
- Vmware虚拟机中windows系统用户名密码忘记处理方案
- Codeforces Round #430 (Div. 2) A. Kirill And The Game
- react native天气项目
- 个人日记
- HDOJ4857 反向建图+优先队列
- Kendoui时间格式问题
- 宝岛探险 深度优先—C
- MySQL时间操作
- C#反射类中所有字段,属性,方法
- Ubuntu出现问题
- react native 上拉下拉刷新