前言
本项目与菜谱项目是一个对比;有兴趣的可以了解下
本项目的使用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-drawer实现侧边栏效果
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
作者：小猿_Luck_Boy
链接：https://www.jianshu.com/p/3496a1881c6a
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
