如何設定和使用PhoneGap中的NativeControls外掛程式

許多人可能也知道，PhoneGap中針對iOS用得最多的兩大外掛程式是NativeControls和ChildBrowser，但外掛程式安裝起來有點棘手，你也無法在互連網上輕輕鬆鬆就能找到這種協助。就拿我來說吧，我在閱讀了PhoneGap的外掛程式安裝說明、進行了測試，才算弄了個明白。於是在本文中，我會介紹設定和使用NativeControls的整個過程但這個過程同樣適用於iOS原始碼庫中的其他任何外掛程式），力求非常簡潔扼要，連PhoneGap初學者也能明白。
我假設你已經將Xcode環境安裝在了Mac機上，並進行了配置，而且熟悉最新版本的Xcode。
你要做的第一件事就是下載phonegap-plugins原始碼庫壓縮文檔https://github.com/purplecabbage/phonegap-plugins），然後將它解壓縮到你喜歡的任何檔案夾。現在進入到解壓縮後的檔案夾，找到iPhone/NativeControls，將NativeControls.h和NativeControls.m拷貝到Xcode上的/<Project Name>/Plugins檔案夾，然後將NativeControls.js移到www檔案夾中你所希望的地方。完成了這一切拷貝和粘貼後，你必須在/<Project Name>/Supporting Files下開啟PhoneGap.plist，使用Key NativeControls、Value NativeControls和Type String，為Plugins資料添加一個新的項。最後，你的項目看來應該像這樣：

 
現在你可以準備開始鑽研代碼了。你要做的第一件事是按這個順序，將所需的Javascript檔案加入到你的索引HTML原始碼中。
<script src="phonegap-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script src="NativeControls.js" type="text/javascript" charset="utf-8"></script>
接下來要做的是找到你的主Javascript檔案——該檔案包含onDeviceReady事件集，然後把NativeControls初始化代碼放在那裡。在這個例子中，我們會使用TabBar組件輸出這樣的內容：

 
你可能也注意到了，我在那裡使用了Glyphish Pro表徵圖庫，你花25美元就能買到，但是一分價錢一分貨，因為它對你的TabBars及更多組件來說是一個非常齊全的表徵圖庫。首先，你應該對NativeControls變數進行初始化，然後為它賦予TabBar，請使用這段代碼：
nativeControls = window.plugins.nativeControls;
nativeControls.createTabBar();
然後你可以開始使用該JSON結構，為標籤tab）建立一個表徵圖/按鈕：
nativeControls.createTabBarItem(
  "books",
  "Books",
  "/www/tabs/book.png",
  {"onSelect": function() {
    // Do something
  }}
);
第一項是名稱變數，第二項是表徵圖標籤，第三項是表徵圖路徑，最後一項是每當表徵圖點擊，就應該被調用的函數。要注意：你應該插入與專案檔夾相對應的表徵圖路徑！至於視網膜表徵圖，我確實鼓勵你仔細看一下關於如何組織視網膜表徵圖的這番解釋http://stackoverflow.com/questions/3666963/iphone-4-tab-bar-icons/3667247#3667247）。你添加了想為TabBar添加的所有表徵圖後，應該在螢幕中顯示它。然後開始放置表徵圖表徵圖按照你在該函數中聲明的次序來放置），最後指定應用程式開啟後，處於活動狀態的TabBar，就像這樣：
nativeControls.showTabBar();
nativeControls.showTabBarItems("books", "finished", "about");
nativeControls.selectTabBarItem("books");
如果你希望只要使用這些關鍵字作為表徵圖項，就能夠在蘋果在其軟體開發包SDK）中預設情況下包含的預定義TabBar表徵圖之間進行選擇：
- tabButton:More
- tabButton:Favorites
- tabButton:Featured
- tabButton:TopRated
- tabButton:Recents
- tabButton:Contacts
- tabButton:History
- tabButton:Bookmarks
- tabButton:Search
- tabButton:Downloads
- tabButton:MostRecent
- tabButton:MostViewed
謹記：標籤將無法使用，因為這些表徵圖會覆蓋標籤，但是你應該在標籤項上放置些什麼東西，否則它無法使用。
我把整個原始碼上傳到了我的Gist，你可以在Example of NativeControls in PhoneGap – Gisthttps://gist.github.com/1384250）中仔細查看。
完成了這些艱難的工作後，你可以準備編譯應用程式、測試它了。如果你正確遵照了上面的操作步驟，那麼應該一切順利。

原文地址：http://www.dreamintech.net/2011/11/how-to-setup-and-use-nativecontrols-in-phonegap/