Skip to content

jeremyzj/rnstarter

Repository files navigation

1. 技术栈

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 中实践

2. 开发链路

2.1 环境安装

react-native 环境安装

2.2 调试

调试:开发流程中最重要的事情,下面两个工具给RN开发带来了超爽的体验 RN 调试工具:react-native-debugger
redux 开发扩展插件:redux-devtools-extension

2.3 eslint

javascript是解释型语言,编译过程只有词法分析和语法分析,并没有词法检查. eslint对于js的意义格外重要

  • 避免隐藏错误
  • 代码统一规范,提高可读性

eslint babel-eslint eslint-plugin-react

2.4 UT : 代码质量的保证

redux unit test.对于actions & reduce校验不可少.
Jest 很棒的BDD。(PS:每当发现一个工具特别好用的时候,发现都是facebook开源的)。
fetch-mock. 异步单测不可少.

2.5 CI

travis-ci. github最流行的CI工具之一.
circle-ci react-native github库使用的CI工具.
gitlab-ci 有条件买gitlab的,可以试试这个

2.6 UI组件以及相关API:

成功搭建环境以后,可以写一个hello world体验一下, react-native文档上对开放的组件以及相关API有详细的介绍和DEMO

2.7 转场:流畅的转场动画对于APP体验很重要

react-navigation. RN社区今后主推的方案是一个单独的导航库react-navigation,它的使用十分简单。
性能上: 在原生线程上的Animated动画库,因而性能表现十分流畅。此外其动画形式和手势都非常便于定制.
使用上:路由栈可以集成到redux中管理, 超级爽的体验

2.8 状态: redux

view 与 状态分离

Redux 由 Flux 演变而来,但受 Elm 的启发,避开了 Flux 的复杂性。 不管你有没有使用过它们,只需几分钟就能上手 Redux。

单向数据流: 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action,一个描述发生什么的对象。 为了描述 action 如何改变 state 树,你需要编写 reducers。

2.9 网络:

fetch
react-native-fetch-blob更好数据传输工具

2.10 存储:

AsyncStorage
集成redux存储

2.11 APP交互:

toast 和 loading对于APP交互时一个重要体验,不要让用户以为你死机了

toast 组件 react-native-spinkit 集成了很多loading动画

2.12 热更新:

React Native一个重要功能,支持热更新,苹果去年有过一次对热修复的严打,JSPatch惨遭扼杀,不过对于RN这样的沙盒热更新是可以的

官方热更新

有条件的单位可以自己建热修复服务,下载bundle包

2.13 native组件开发:

React Native可能还没有相应的模块封装,但是提供native组件开发能力.

iOS原生模块
iOS原生UI组件
安卓原生模块
安卓原生UI组件

3. rnstart是针对上面总结的RN starter demo工程

3.1 目录结构


 |-- 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
        

3.2 安装


git clone https://github.com/jeremyzj/rnstarter
cd rnstarter & npm install

建议先安装react-native-debugger 体验效果会更好

3.3 运行


react-native run-ios //或者react-native run-andriod

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published