1.1 javascript - ECMAScript6 : 语言工具;
1.2 React : 起源于 Facebook 的内部项目, 因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,在2013年5月开源. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具;
RN是基于react的框架,整体开发思路也和react 基本一致
1.3 flex 布局 : 网页应用的主流布局方式;
1.4 ReactNative : facebook开发的跨平台工具,基于React,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑, 截止到文章日期5.6K星;
1.5 Node.js & npm & Yarn : 了解基础 & 使用
node.js RN的调试服务就是node服务器
npm js包管理工具.
Yarn 是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
1.6 redux : JS 状态容器,实现view & state 分离,开发体验超爽, 而且体小精悍(只有2K)
1.7 immutable.js :
Pete Hunt: Shared mutable state is the root of all evil(共享的可变状态是万恶之源), 有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明, Facebook 工程师 Lee Byron 花费 3 年时间打造,与 React 同期出现。
Immutable 详解及 React 中实践
react-native 环境安装
调试:开发流程中最重要的事情,下面两个工具给RN开发带来了超爽的体验
RN 调试工具:react-native-debugger
redux 开发扩展插件:redux-devtools-extension
javascript是解释型语言,编译过程只有词法分析和语法分析,并没有词法检查. eslint对于js的意义格外重要
- 避免隐藏错误
- 代码统一规范,提高可读性
eslint babel-eslint eslint-plugin-react
redux unit test.对于actions & reduce校验不可少.
Jest 很棒的BDD。(PS:每当发现一个工具特别好用的时候,发现都是facebook开源的)。
fetch-mock. 异步单测不可少.
travis-ci. github最流行的CI工具之一.
circle-ci react-native github库使用的CI工具.
gitlab-ci 有条件买gitlab的,可以试试这个
成功搭建环境以后,可以写一个hello world体验一下, react-native文档上对开放的组件以及相关API有详细的介绍和DEMO
react-navigation. RN社区今后主推的方案是一个单独的导航库react-navigation,它的使用十分简单。
性能上: 在原生线程上的Animated动画库,因而性能表现十分流畅。此外其动画形式和手势都非常便于定制.
使用上:路由栈可以集成到redux中管理, 超级爽的体验
2.8 状态: redux
view 与 状态分离
Redux 由 Flux 演变而来,但受 Elm 的启发,避开了 Flux 的复杂性。 不管你有没有使用过它们,只需几分钟就能上手 Redux。
单向数据流: 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action,一个描述发生什么的对象。 为了描述 action 如何改变 state 树,你需要编写 reducers。
fetch
react-native-fetch-blob更好数据传输工具
toast 和 loading对于APP交互时一个重要体验,不要让用户以为你死机了
toast 组件 react-native-spinkit 集成了很多loading动画
React Native一个重要功能,支持热更新,苹果去年有过一次对热修复的严打,JSPatch惨遭扼杀,不过对于RN这样的沙盒热更新是可以的
有条件的单位可以自己建热修复服务,下载bundle包
React Native可能还没有相应的模块封装,但是提供native组件开发能力.
iOS原生模块
iOS原生UI组件
安卓原生模块
安卓原生UI组件
2.14 丰富的组件库
3. rnstart是针对上面总结的RN starter demo工程
|-- rnstarter
|-- __tests__ //单测文件目录
|-- android //安卓平台
|-- ios //iOS平台
|-- README.md
|-- fastlane //fastlane iOS打包工具
|-- package.json
|-- .babelrc
|-- .eslintrc.js //eslint配置文件
|-- .gitignore
|-- .travis.yml //travis ci 配置文件
|-- index.js //APP 入口文件
|-- App
|-- Component //无状态组件
|-- Image //图片资源
|-- Modules //业务状态模块,管理redux的actions, reducer
|-- Navigation //转场, route管理
|-- Network //网络
|-- Middleware //redux 中间件
|-- Theme //全局主题管理
|-- colors.js
|-- Fonts.js
|-- index.js
|-- Sizes.js
|-- Styles.js
|-- Util //工具类
|-- ConfigureStore.js //redux store配置
|-- index.js //入口文件
|-- Reducers.js //reducers
git clone https://github.com/jeremyzj/rnstarter
cd rnstarter & npm install
建议先安装react-native-debugger 体验效果会更好
react-native run-ios //或者react-native run-andriod