如何将图像应用到 Cordova 中的标签栏项目

Posted 2023-03-15

【中文标题】如何将图像应用到 Cordova 中的标签栏项目

【英文标题】：How to apply images to the tab bar items in Cordova

【发布时间】：2016-01-19 14:24:27

【问题描述】：

我正在尝试使用 cordova 构建一个简单的标签栏模板。

到目前为止，我有这段代码，它向应用程序添加了一个简单的标签栏。

            var tabBar = cordova.require("cordova/plugin/iosTabBar");
            tabBar.init();

            tabBar.create(selectedImageTintColorRgba: "255,40,0,255");
            tabBar.createItem("tab1", "Home", "");
            tabBar.createItem("tab2", "Locations", "");
            tabBar.createItem("tab3", "Utilities", "");
            tabBar.createItem("tab4", "Inspire", "");
            tabBar.createItem("tab5", "Cloud Sync", "", 
                onSelect: function() 
                    alert("Cloud tab selected");
                
            );

            tabBar.show();
            tabBar.showItems("tab1", "tab2","tab3","tab4","tab5");

结果是这样的：

当我尝试将图像添加到图标时，

           var tabBar = cordova.require("cordova/plugin/iOSTabBar");

            tabBar.init();

            tabBar.create(selectedImageTintColorRgba: "255,40,0,255");
            tabBar.createItem("tab1", "Home","/www/res/icon/ios/Home.png");
            tabBar.createItem("tab2", "Locations", "Home.png");
            tabBar.createItem("tab3", "Utilities", "/www/img/Home.png");
            tabBar.createItem("tab4", "Inspire", "/www/Home.png");
            tabBar.createItem("tab5", "Cloud Sync", "/Home.png", 
                onSelect: function() 
                    alert("Cloud tab selected");
                
            );

            tabBar.show();
            tabBar.showItems("tab1", "tab2","tab3","tab4","tab5");

我尝试了如上所示的不同路径，但选项卡项都没有显示图像。

这里是图片路径：

我将图像复制到不同的地方并尝试过，但没有一个适合我。

这里是创建标签栏项目的代码：

 * @param String name internal name to refer to this tab by
 * @param String [title] title text to show on the tab, or null if no text should be shown
 * @param String [image] image filename or internal identifier to show, or null if now image should be shown
 * @param Object [options] Options for customizing the individual tab item


    TabBar.prototype.createItem = function(name, label, image, options) 
    var tag = this.tag++;
    if (options && 'onSelect' in options && typeof(options['onSelect']) == 'function') 
        this.callbacks[tag] = onSelect: options.onSelect, name: name;
        //delete options.onSelect;
    

    exec(null, null, "TabBar", "createItem", [name, label, image, tag, options]);
;

我不确定，要在图像字段中传递的正确参数是什么。

谁能建议我正确的做法？

我正在使用这个插件：https://github.com/AndiDog/phonegap-ios-tabbar-plugin

【参考方案1】：

奇怪的是教程建议在路径开头提到/，但是图像应用于项目，而我没有在路径开头提到/。

这对我有用：

            tabBar.createItem("tab1", "Home", "www/Home.png");

图片的正确路径是"www/Home.png"而不是"/www/Home.png"

我不确定为什么 /www 不被视为正确路径。