ReactNative创建自己的脚手架

一、脚手架使用方式

react-native init 【项目名称】 --template 【模板名称】

二、facebook的navigation模板分析

使用navigation模板构建项目

react-native init MyApp --version 0.43.0-rc.4 --template navigation

不适用模板构建项目

react-native init MyApp

目录对比.png

如上面图中所示，红框圈中的就是多出来的，这几个文件就是我们自定义 template 所生成的

三、自定义模板lawrence

创建空项目lawrence

react-native init lawrence

目录示意图.png

• 如上面图中所示，红框圈中的可根据自己的需要删除或保留，也可以根据自己的需求添加自己的文件夹及文件。
• package.json 上传 NPM 时用到的一些基本配置，还有一些其他的配置属性，但这里只需要这两项即可。

{
    "name": "react-native-template-lawrence",//上传 NPM 仓库的名称
    "version": "0.0.1"//版本号，同一仓库不可以上传两次同版本号的内容
     ......
}

• dependencies.json 模板工程中所依赖的三方库

// 根据自己需求添加
{
  "react": "16.6.1",
  "react-native": "0.58.4",
  "events": "^3.0.0",
  "mobx": "^3.6.2",
  "mobx-persist": "^0.4.1",
  "mobx-react": "^4.4.3",
  "prop-types": "^15.6.2",
  "@remobile/react-native-toast": "^1.0.7"
}

• devDependencies.json 模板工程中开发所依赖的三方库

// 根据自己需求添加
{
  "babel-core": "^7.0.0-bridge.0",
  "babel-jest": "24.1.0",
  "jest": "24.1.0",
  "metro-react-native-babel-preset": "0.51.1",
  "react-test-renderer": "16.6.3"
}

四、上传 npm

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

1、注册账号 https://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/+ 插件名 】可以在网页访问

---

到这里创建自己的脚手架就算结束
脚手架示例代码：https://gitee.com/ak-star/react-native-lawrence