开发前准备
- 搭建开发环境
根据自身的硬件环境,分别安装不同的环境,具体请看官网的教程。#搭建开发环境
- 关于node
开发RN项目之前,需要熟悉几个npm命令。例如
1 | npm install |
安装该项目中所有依赖包,一般写在package.json中
1 | npm install XXX --save |
为你的项目中添加某个依赖包
等等。。
当你在本地运行一个React Native的项目时,会同步打开一个终端。会在本地的8081端口启动Js Server,当程序启动的时候,会通过这个服务读取Js代码,并完成页面的渲染。在程序运行的过程中,要保持这个终端处于一直运行的状态。不涉及原生代码改动的时候,无需重新编译。重新Reload页面即可。
- React Native版本
开始一个新的项目之前,首先确定要使用的RN版本(官方每三个月更新一次),基本上都会使用0.43以上的版本。因为许多组件在之前的老版本并不存在,比如FlatList。新建一个指定版本的RN项目只需
1 | react-native init MyApp --version 0.39.2 |
注意版本号必须精确到两个小数点。
- 开发工具
开发工具推荐使用WebStorm或者是VSCode,下载一个Chrome浏览器对于调试有很大帮助。
辅助功能
除了正常的开发工作,你可能还需要一些辅助的功能来帮助更好的开发
- ESLint
ESLint是一个JS插件,用来检测代码规范性。它自己包含了一些规范,当然你也可以自己去配置一些符合自己编码习惯的规则。虽然它是一个代码检测,但也不是所有的规则都需要遵循。在.eslintrc中编辑你的规则。ESLint中文官方网站
当配置好你的规则之后,打开IDE的代码检测功能。当你违反了制定的代码规范,会以红标提示。你也可以手动执行命令进行代码检测。
1 | eslint --ext .js src test |
执行完之后,会精确到代码行数的报错。
如果需要强制执行,请使用pre-commit插件。它会在每次commit之前执行某些操作,如果遇到问题,就会停止commit操作。
如果你不希望有些代码进行代码检测,把它们的路径加入到.eslintignore文件中:)
- mock
界面完成之后,可能你的后台服务并没有完成。有些界面会根据数据的不同进行调整。这时候可以通过node服务,模拟一个后台服务器并mock出模拟数据返回到前台页面,完成简单的接口测试。
你可以使用express来搭建一个简单的node服务器
通过mock来完成简单的数据,具体方式请参见mock官方网站
- git
无论是单人开发还是多人协作,git无疑是最好的版本控制工具。日常开发中涉及的git命令并不多,学习成本也不高,请务必使用。实在是没有使用过的请参考廖雪峰GIT教程!
这里需要强调的是分支管理,如果是多人开发必须制定一些规则使每个人可以更加方便的开发。
- 新建master分支,用于大版本的合并,并设立保护分支
- 新建develop分支,用于日常的开发工作,并设立保护分支
- 新建submit分支,用于测试版本
- 为每一个人新建一个分支,每个人只能在自己的分支上进行开发工作,下班前提交到自己的远程分支上
- 一个阶段的代码完成后,需要合并到develop分支,需提交合并请求由项目管理员进行合并操作
- 合并之后每个成员合并develop分支
以上可以根据项目的需求自行修改
需要考虑的事情
一个新的项目首先要考虑的就是结构:目录结构、代码结构、系统架构等等,这些会一直影响着项目的健壮性、拓展性。但当代码遇到问题的时候,重构也是必要的。
- 目录结构
这里说的是文件的物理结构。
1.功能相同的放入同一个文件夹
功能相同就是说,把所有的页面放入一个文件夹,把所有的逻辑处理放入一个文件夹类似于这种分类方式。优点是同类型的文件都放在一起。缺点是关于同一个页面的代码会分散在几个或者好几个文件夹中,寻找起来比较麻烦。
2.统一模块的代码放入同一个文件夹
统一模块的代码包含了这个模块的界面、逻辑处理、网络请求等所有涉及的代码,一个文件夹代表着一个功能模块。优点是相关代码放在一起,寻找或者引用的时候比较快,代码迁移比较方便。缺点是功能模块难以有明确的区分点,一些页面有复用情况。
- 代码结构
你可以在React Naitve的代码中编写JS,也可以写JSX,还可以写样式表或者是内联在JSX中的样式,网络请求也可以写。上面所有的内容都可以写在同一个JS中,这里就需要制定规则。哪些可以写在一起,哪些需要新建另外一个文件去辅助。
当然还有一些可有可无的东西,例如注释、属性列表等。它们可以帮助代码更好的被理解,增加代码可读性。也可以制定合理的代码规范,配合插件可以很好的使用。
- 系统架构
有关系统架构需要考虑的因素就更多了,如何去处理数据逻辑,网络请求如何去实现,页面与页面之间的联系如何进行等等。这些问题会涉及很多的第三方组件,你需要用以下几个方面去考察这个第三方组件:
- github上stars的数量,可以直观反映出这个组件的质量如何
- 上一次提交的时间。如果超过一年没有更新过,那么很可能并不适合新版的RN
- github上issuse数量,当遇到问题的时候大部分都是通过issuse解决
当然这仅仅是最基本的方面,还有许多别的考察方面,比如它的实现方式,README有没有写的比较详细等等。当你逐个确定要使用的组件之后,一一引入。有些仅仅在开发阶段使用的组件,可以将它们引入开发依赖包中,以免打包进入项目,使得项目包变大。