react-native实现一款简单的天气预报iOS，andro

前言

本项目与菜谱项目是一个对比;有兴趣的可以了解下

本项目的使用react-native提供的传统state和props管理搭建项目。菜谱项目是使用react-redux,redux，react-navigation;

我本着使用最原始的构建方式目的是为了和用redux,react-redux构建项目做一个对比，为各位对两者搭建项目的不同列出简单的对比;

在菜谱项目会详细介绍redux,react-redux的使用

传统方式

• 组件管理state，当一个组件交互多的时候，state中的值越来越庞大，简单的通过setState更新UI这会让你管理state更加的不易，这样会把应用逻辑放在组件中，会使组件代码量越来越多
• 通过props传值和回调。通过props正向传值没什么问题，但是当组件的封装层级越深,反传就会越复杂，这就导致回调很多层次才达到你想把子组件的值回调目的组件，这使得逆向传值复杂化

redux的方式

• store管理state,当然也可以在组件中管理state(不推荐使用), 全局的方式
• action编写应用逻辑, 不管封装多少层, 你都可以在子组件中通过connect方法连接action, action通过dispatch通知负责目的父组件state的reducer更新state中的变量, 更新父组件,组件中的逻辑代码被抽开，在这里可以编写交互事件的逻辑，网络请求，数据处理等，降低了模块间耦合度
• reducer管理state的更新与否，当然最好配合Immutable使用更加方便

学习经历

目前移动端的混合开发越来与火了,目前比较成熟的混合开发框架包括react-native,Ionic,Weex等,总之很多

相比下react-native还是蛮火的，不仅有成熟的web框架react,还有react-native开发移动app

我前段时间学习react-native的学习历程

• react-native官方网站api
• 开源项目

个人学习中做的小Demo,有兴趣可以共同学习一下
react-native-learn不断更新...

github源码---react-native-weather

项目简介

纯粹使用react-native的UI组件和提供的Animated Api实现的一款天气预报的app；功能主要包括：城市列表，城市搜索，城市添加，设置默认城市，15天天气预报，24小时天气详情，生活指数，天气详情。
技术点实现：

• 分页组件
• 仿iOS的搜索框
• 毛玻璃效果
• 侧滑删除，设置默认
• FlatList 横向
• 导航组件
• 组件数据流的传递
• 基于react-native实现的简单动画
• 导航条的封装
• 手势与动画相结合的滑动效果的实现

项目截图

使用框架

"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-blur": "^3.1.2",
"react-native-deprecated-custom-components": "^0.1.0",
"react-native-drawer": "^2.3.0",
"react-native-swipeout": "^2.0.13"

• react-native-deprecated-custom-components是facebook废弃的组件框架
  • 项目用到了naviagtor实现导航组件, 在0.44.0的react-native已经被废弃,官方已经推荐react-navigation,下一个菜谱项目项目会用到
• react-native-swipeout实现侧滑功能

react-native-swipeout

• react-native-drawer 实现侧边栏效果

react-native-drawer

• react-native-blur 实现毛玻璃效果

react-native-blur

项目安装,运行

下载

git clone https://github.com/liuboshuo/react-native-weather.git

安装

切换到项目工作环境,在terminal执行

npm install

react-native link react-native-blur

运行

react-native run-android

Run android avd and start an emulator

react-native run-ios

心得

• 使用传统的方式编写复杂的业务逻辑，这样会使代码量多，模块依赖严重
• 我们都知道web编写style是一件繁琐的事情，虽然react-native的style比web的css更简单。但是当app复杂化的时候(比如管理皮肤)，怎么样管理app的统一style? 求解？ 有方案的大神可以联系liushuo132981@163.com一起沟通交流