《React Native高效开发》之 template

1,932 阅读4分钟
  • 本文为 Marno 原创,转载必须保留出处!
  • 公众号【 aMarno 】,关注后回复 RN 加入交流群
  • React Native 优秀开源项目大全:www.marno.cn

一、来龙去脉

在今年2月10日的时候,有人在 github 给 Facebook 提了一个建议,希望可以提供类似 Cordova 中模板的功能,具体地址在这里:【戳我去围观】。Facebook采纳了这个建议,在 RN 0.42 的版本中添加了个新功能,支持在新建工程时直接使用 --template命令 进行初始化。但当时仅提供了一套模板,所以这个功能多少显得有点鸡肋。在前几天发布的 RN 0.43-RC4 的版本中,官方提供了自定义模板工程的能力,这才使得这个功能实用性稍微增强了一点。

尽管这样,还是有人说这是个鸡肋功能,因为完全可以自己新建一个 RN 工程,添加好自己常用的三方库和一些工具类后上传到 github ,然后每次新建项目的时候直接 check 出来就好了。但是那样的话如果 RN 版本更新,修改项目名称等就会变得有些麻烦了。所以到底是否实用大家还是自己判断吧,反正我是挺喜欢的。哈哈~也欢迎大家在留言区讨论。

二、如何使用

在开始自己动手创建模板之前,我们先来了解一下模板工程工程怎么使用。

使用模板工程创建新项目,我们就不再使用 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 需要的文件,如果你修改了 index.android.js 或 index.ios.js 文件,当然也需要把这两个文件也加到模板中。具体文件目录结构如下↓↓。也可以到 github 仓库直接查看示例的代码结构:【传送门】

  • components:存放各类组件的文件夹,不涉及具体业务罗的单纯组件等

  • lib:存放一些依赖文件,公共类等

  • views:存放一个视图相关的文件,所有页面都在这里面

  • package.json:上传 NPM 时用到的一些基本配置,还有一些其他的配置属性,但这里只需要这两项即可。

    {
      "name": "react-native-template-turbo",//上传 NPM 仓库的名称
      "version": "0.0.2"//版本号,同一仓库不可以上传两次同版本号的内容
    }
  • dependencies:模板工程中所依赖的三方库
    {
      "react-navigation": "1.0.0-beta.5"//可以按照这个格式添加其他的三方库
    }

知道每个文件的含义后,我们就按照这个格式新建一个文件夹,将自己常用的一些功能添加进来,比如 navigation 的配置,一些工具类,一些通用的页面等。还有一些其他的功能可以添加,自由发挥就行!

在进入下个步骤之前先回答一个问题:上传模板工程的目录结构是不是必须按照上图中的样子?我在官方文档中没有找到相关介绍,自己试了下貌似是不行,也不知道是不是我哪里没有配置对。这里更正一下,目录结构是可以按照自己的需求随意更改的。之前是我文件路径没配置对。

四、上传 npm

当完成模板代码的编写后,要上传到 NPM 服务器,这里需要注意一下,上传模板的名称必须遵循【react-native-template-XXX】这个格式,如官方的模板【react-native-template-navigation】,所以取名的时候一定注意不要重名了。

接下来的步骤就没有什么难度了,因为上传到 NPM 服务器的操作是十分简单的,步骤如下↓↓。(以下操作不仅可以用来上传模板工程,还可以用来上传 RN 开源库。)

  1. 注册账号 www.npmjs.com/
  2. 终端执行命令npm adduser --registry http://registry.npmjs.org
  3. 根据提示输入第一步中注册好的账号、密码、邮箱
  4. 将当前路径切换到要发布的模板的文件夹中(保证有package.json文件)
  5. 终端执行命令npm publish --registry http://registry.npmjs.org进行发布
  6. 发布成功后通过【https://www.npmjs.com/+ 插件名 】可以在网页访问

整个操作是非常简单的,而且只有第一次需要按照这个进行操作,以后如果更新版本的话,直接切换到当前路径下,再执行一次上面第 5 步的操作就行了。

五、结语

不写个结语就总觉得文章好像还没写完似的。哈哈~欢迎关注与交流,【点我交流】