一、脚手架使用方式
react-native init 【项目名称】 --template 【模板名称】
二、facebook的navigation
模板分析
使用navigation
模板构建项目
react-native init MyApp --version 0.43.0-rc.4 --template navigation
不适用模板构建项目
react-native init MyApp
如上面图中所示,红框圈中的就是多出来的,这几个文件就是我们自定义 template 所生成的
三、自定义模板lawrence
创建空项目lawrence
react-native init lawrence
- 如上面图中所示,红框圈中的可根据自己的需要删除或保留,也可以根据自己的需求添加自己的文件夹及文件。
- 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