《React Native高效开发》之 template

最新推荐文章于 2024-09-13 22:34:29 发布

Marno_

最新推荐文章于 2024-09-13 22:34:29 发布

阅读量2.9k

点赞数 1

分类专栏： React Native 开发阵营文章标签： react-native 移动开发 andorid ios react

本文链接：https://blog.csdn.net/marno__/article/details/68648234

版权

React Native 开发阵营专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文为 Marno 原创，转载必须保留出处！
公众号 aMarno，关注后回复 RN 加入交流群
简书专题《 React-Native 开发阵营》，欢迎关注和投稿

一、来龙去脉

在今年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 开源库。）

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

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