一、腳手架使用方式

react-native init 【項目名稱】 --template 【模板名稱】

二、facebook的navigation模板分析

使用navigation模板構(gòu)建項目

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

不適用模板構(gòu)建項目

react-native init MyApp

目錄對比.png

如上面圖中所示，紅框圈中的就是多出來的，這幾個文件就是我們自定義 template 所生成的

三、自定義模板lawrence

創(chuàng)建空項目lawrence

react-native init lawrence

目錄示意圖.png

• 如上面圖中所示，紅框圈中的可根據(jù)自己的需要刪除或保留，也可以根據(jù)自己的需求添加自己的文件夾及文件。
• package.json 上傳 NPM 時用到的一些基本配置，還有一些其他的配置屬性，但這里只需要這兩項即可。

{
    "name": "react-native-template-lawrence",//上傳 NPM 倉庫的名稱
    "version": "0.0.1"http://版本號，同一倉庫不可以上傳兩次同版本號的內(nèi)容
     ......
}

• dependencies.json 模板工程中所依賴的三方庫

// 根據(jù)自己需求添加
{
  "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 模板工程中開發(fā)所依賴的三方庫

// 根據(jù)自己需求添加
{
  "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 服務(wù)器，這里需要注意一下，上傳模板的名稱必須遵循react-native-template-xxx這個格式，如官方的模板react-native-template-navigation，所以取名的時候一定注意不要重名了。

1、注冊賬號 https://www.npmjs.com/
2、終端執(zhí)行命令npm adduser --registry http://registry.npmjs.org
3、根據(jù)提示輸入第一步中注冊好的賬號、密碼、郵箱
4、將當前路徑切換到要發(fā)布的模板的文件夾中（保證有package.json文件）
5、終端執(zhí)行命令npm publish --registry http://registry.npmjs.org進行發(fā)布
6、發(fā)布成功后通過【https：//www.npmjs.com/+ 插件名 】可以在網(wǎng)頁訪問

到這里創(chuàng)建自己的腳手架就算結(jié)束
腳手架示例代碼：https://gitee.com/ak-star/react-native-lawrence