《React Native高效開發》之 template

Marno發表於2017-03-31
React Native
  • 本文為 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 步的操作就行了。

五、結語

不寫個結語就總覺得文章好像還沒寫完似的。哈哈~歡迎關注與交流，【點我交流】

相關文章