react-native学习路线

react-native是Facebook推出的跨平台开发技术,使用JavaScript代码,目前是es6。主要涉及知识点flexbox(弹性工具盒)布局,flux来管理数据流动

初级阶段

  • es6语法
    • promis
    • async,waite
    • lodash:是具有一致接口,模块化,高性能等特性的JavaScript工具库。
  • npm安装,react-native安装,环境搭建
  • 了解Props,State
  • 学习样式jxs,flexbox
  • 学习导航器

进阶阶段

  • es6语法
    • 三个点参数用法(rest参数,spread操作符)
    • 异步函数(Promise,Async)
    • array操作(join,conact,map…)
    • babel(es6转译es5)
    • Object.assign(obj,…):扩展操作
    • 柯里化(curry)函数:参数逐渐求值的过程
    • compose函数
  • 学习redux,了解它与flux的区别,学会如何使用单项数据流的思想管理状态树。它的使用场景会更多。你也可以看做它是简化了流程的flux。

    • action
    • reducer
    • store
    • middleWare
    • redux-thunk:比较流行的redux异步action中间件,统一了异步和同步action的调用方式,避免在component动刀子。
  • 学习Reselect:构建粒度化的数据,Reselect 库可以创建可记忆的(Memoized)、可组合的 selector 函数。Reselect selectors 可以用来高效地计算 Redux store 里的衍生数据。

  • 学习react-native-drawer:可用于Android ios的抽屉式控件。
  • 学习react-native-model-picker:一个比较好用的model picker,兼容Android iOS

  • 学习redux-watch:一个可以检测全局store数据变动的组件,常用于全局的状态变化,比如登录数据:当发现token不一致时,弹出登录界面。比如全局检测错误数据:根据错误id显示不同的提示。

  • 文件系统
  • 导航

解坑阶段

坑1:ipad 模拟器 command+D 程序崩溃

0.3.6才有的问题,ipad丢失了actionsheet布局
修复:
在React/Modules/RctDevMenu.m第519行新增

1
UIAlertControllerStyle style = [[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone ? UIAlertControllerStyleActionSheet : UIAlertControllerStyleAlert;

然后把519行的

1
2
3
_actionSheet = [UIAlertController alertControllerWithTitle:title
message:@""
preferredStyle:UIAlertControllerStyleActionSheet];

替换为

1
2
3
_actionSheet = [UIAlertController alertControllerWithTitle:title
message:@""
preferredStyle:style];