前言
本项目与菜谱项目是一个对比;有兴趣的可以了解下
本项目的使用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
心得
- 使用传统的方式编写复杂的业务逻辑，这样会使代码量多，模块依赖严重
- 我们都知道web编写style是一件繁琐的事情，虽然react-native的style比web的css更简单。但是当app复杂化的时候(比如管理皮肤)，怎么样管理app的统一style? 求解？
