許多人可能也知道，PhoneGap中針對(duì)iOS用得最多的兩大插件是NativeControls和ChildBrowser，但插件安裝起來有點(diǎn)棘手，你也無法在互聯(lián)網(wǎng)上輕輕松松就能找到這種幫助。就拿我來說吧，我在閱讀了PhoneGap的插件安裝說明、進(jìn)行了測(cè)試，才算弄了個(gè)明白。于是在本文中，我會(huì)介紹設(shè)置和使用NativeControls的整個(gè)過程（但這個(gè)過程同樣適用于iOS源代碼庫中的其他任何插件），力求非常簡潔扼要，連PhoneGap初學(xué)者也能明白。
我假設(shè)你已經(jīng)將Xcode環(huán)境安裝在了Mac機(jī)上，并進(jìn)行了配置，而且熟悉***版本的Xcode。
你要做的***件事就是下載phonegap-plugins源代碼庫壓縮文檔（https://github.com/purplecabbage/phonegap-plugins），然后將它解壓縮到你喜歡的任何文件夾。現(xiàn)在進(jìn)入到解壓縮后的文件夾，找到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數(shù)據(jù)添加一個(gè)新的項(xiàng)。***，你的項(xiàng)目看來應(yīng)該像這樣：

 
現(xiàn)在你可以準(zhǔn)備開始鉆研代碼了。你要做的***件事是按這個(gè)順序，將所需的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初始化代碼放在那里。在這個(gè)例子中，我們會(huì)使用TabBar組件輸出這樣的內(nèi)容：

 
你可能也注意到了，我在那里使用了Glyphish Pro圖標(biāo)庫，你花25美元就能買到，但是一分價(jià)錢一分貨，因?yàn)樗鼘?duì)你的TabBars及更多組件來說是一個(gè)非常齊全的圖標(biāo)庫。首先，你應(yīng)該對(duì)NativeControls變量進(jìn)行初始化，然后為它賦予TabBar，請(qǐng)使用這段代碼：
nativeControls = window.plugins.nativeControls;
nativeControls.createTabBar();
然后你可以開始使用該JSON結(jié)構(gòu)，為標(biāo)簽（tab）創(chuàng)建一個(gè)圖標(biāo)/按鈕：
nativeControls.createTabBarItem(
  "books",
  "Books",
  "/www/tabs/book.png",
  {"onSelect": function() {
    // Do something
  }}
);
***項(xiàng)是名稱變量，第二項(xiàng)是圖標(biāo)標(biāo)簽，第三項(xiàng)是圖標(biāo)路徑，***一項(xiàng)是每當(dāng)圖標(biāo)點(diǎn)擊，就應(yīng)該被調(diào)用的函數(shù)。要注意：你應(yīng)該插入與項(xiàng)目文件夾相對(duì)應(yīng)的圖標(biāo)路徑！至于視網(wǎng)膜圖標(biāo)，我確實(shí)鼓勵(lì)你仔細(xì)看一下關(guān)于如何組織視網(wǎng)膜圖標(biāo)的這番解釋（http://stackoverflow.com/questions/3666963/iphone-4-tab-bar-icons/3667247#3667247）。你添加了想為TabBar添加的所有圖標(biāo)后，應(yīng)該在屏幕中顯示它。然后開始放置圖標(biāo)（圖標(biāo)按照你在該函數(shù)中聲明的次序來放置），***指定應(yīng)用程序開啟后，處于活動(dòng)狀態(tài)的TabBar，就像這樣：
nativeControls.showTabBar();
nativeControls.showTabBarItems("books", "finished", "about");
nativeControls.selectTabBarItem("books");
如果你希望只要使用這些關(guān)鍵字作為圖標(biāo)項(xiàng)，就能夠在蘋果在其軟件開發(fā)包（SDK）中默認(rèn)情況下包含的預(yù)定義TabBar圖標(biāo)之間進(jìn)行選擇：
- tabButton:More
- tabButton:Favorites
- tabButton:Featured
- tabButton:TopRated
- tabButton:Recents
- tabButton:Contacts
- tabButton:History
- tabButton:Bookmarks
- tabButton:Search
- tabButton:Downloads
- tabButton:MostRecent
- tabButton:MostViewed
謹(jǐn)記：標(biāo)簽將無法使用，因?yàn)檫@些圖標(biāo)會(huì)覆蓋標(biāo)簽，但是你應(yīng)該在標(biāo)簽項(xiàng)上放置些什么東西，否則它無法使用。
我把整個(gè)源代碼上傳到了我的Gist，你可以在Example of NativeControls in PhoneGap – Gist（https://gist.github.com/1384250）中仔細(xì)查看。
完成了這些艱難的工作后，你可以準(zhǔn)備編譯應(yīng)用程序、測(cè)試它了。如果你正確遵照了上面的操作步驟，那么應(yīng)該一切順利。

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