1
来龙去脉
在今年2月10日的时候,有人在 github 给 Facebook 提了一个建议,希望可以提供类似 Cordova 中模板的功能,具体地址在这里:http://t.cn/R6pbECn(可以去围观),Facebook采纳了这个建议,在 RN 0.42 的版本中添加了个新功能,支持在新建工程时直接使用** --template命令 **进行初始化。但当时仅提供了一套模板,所以这个功能多少显得有点鸡肋。在前几天发布的 RN 0.43-RC4 的版本中,官方提供了自定义模板工程的能力,这才使得这个功能实用性稍微增强了一点。
尽管这样,还是有人说这是个鸡肋功能,因为完全可以自己新建一个 RN 工程,添加好自己常用的三方库和一些工具类后上传到 github ,然后每次新建项目的时候直接 check 出来就好了。但是那样的话如果 RN 版本更新,修改项目名称等就会变得有些麻烦了。所以到底是否实用大家还是自己判断吧,反正我是挺喜欢的。哈哈~也欢迎大家在留言区讨论。
2
如何使用
在开始自己动手创建模板之前,我们先来了解一下模板工程工程怎么使用。
使用模板工程创建新项目,我们就不再使用 react-native init XXX 的命令了,而是使用 react-native init XXX template AAA,其中 AAA 表示所用模板在 NPM 上的名称,比如你在 NPM 上的仓库名称显示为 “react-native-template-marno” ,那 AAA 就是指 marno。
但由于这个是 RN 0.43-RC4 提供的功能,所以在使用的时候,我们需要强制指定 RN 的版本,具体的命令是 react-native init MyApp --version 0.43.0-rc.4 --template navigation,这里用到 navigation 就是上文提到的官方提供的那个模板(等0.43正式版放出后就不用指定版本了)。初始化完成后,目录结构如下:
▲使用 template 创建的项目
3
自定义模板
如上面图中所示,红框圈中的就是多出来的,这几个文件就是我们自定义 template 需要的文件,如果你修改了 index.android.js 或 index.ios.js 文件,当然也需要把这两个文件也加到模板中。具体文件目录结构如下。也可以到 github 仓库直接查看示例的代码结构:http://t.cn/R60aPY1
▲模板工程文件结构
components:存放各类组件的文件夹,不涉及具体业务罗的单纯组件等
lib:存放一些依赖文件,公共类等
views:存放一个视图相关的文件,所有页面都在这里面
package.json:上传 NPM 时用到的一些基本配置,还有一些其他的配置属性,但这里只需要这两项即可。
{//上传 NPM 仓库的名称"name": "react-native-template-turbo",//版本号,不能与上次相同"version": "0.0.2"}
dependencies:模板工程中所依赖的三方库
{//可以按照这个格式添加其他的三方库"react-navigation": "1.0.0-beta.5"}
知道每个文件的含义后,我们就按照这个格式新建一个文件夹,将自己常用的一些功能添加进来,比如 navigation 的配置,一些工具类,一些通用的页面等。还有一些其他的功能可以添加,自由发挥就行!
在进入下个步骤之前先回答一个问题:上传模板工程的目录结构是不是必须按照上图中的样子?我在官方文档中没有找到相关介绍,自己试了下貌似是不行,也不知道是不是我哪里没有配置对。
4
上传 NPM
当完成模板代码的编写后,要上传到 NPM 服务器,这里需要注意一下,上传模板的名称必须遵循 react-native-template-XXX 这个格式,比如官方的模板名字是 react-native-template-navigation,所以取名的时候一定注意不要重名了。
接下来的步骤就没有什么难度了,因为上传到 NPM 服务器的操作是十分简单的,步骤如下↓↓。(以下操作不仅可以用来上传模板工程,还可以用来上传 RN 开源库)
终端执行命令 npm adduser --registry http://registry.npmjs.org
根据提示输入第一步中注册好的账号、密码、邮箱
将路径切换到模板的文件夹中(必须有package.json)
终端执行命令 **npm publish --registry ****http://registry.npmjs.org****** 进行发布
发布成功后通过 https://www.npmjs.com/ + 插件名 在网页访问
上传完成后就可以使用自定义的模板新建工程了。整个操作是非常简单的,而且只有第一次需要这几步,以后如果更新模板版本的话,直接切换到当前路径下,再执行一次上面第 5 步的操作就可以。