TabBarIOS ~低质量Tint废墟图像的利用

Question

我们正在使用react本机开发一个iOS应用程序。在这个应用程序中，我们使用TabBarIOS组件。我们有五个选项卡，它们为active选项卡有单独的图标，图像的布局如下所示：

|_images
|__tabbaricons
|___ tab-1-on.png          (35x35)
|___ tab-1-on@2.png        (70x70)
|___ tab-1-on@3.png        (105x105)
|___ tab-1-off.png         (35x35)
|___ tab-1-off@2.png       (70x70)
|___ tab-1-off@3.png       (105x105)

在TabBarIOS组件中，我的项被标记成这样：

<TabBarIOS.Item
    selected={currentTab.name === 'profile'}
    icon={require('./images/tabbaricons/profile-off.png')}
    selectedIcon={require('./images/tabbaricons/profile-on.png')}
    renderAsOriginal={true}
    title="" 
    onPress={() => {
        this.props.navigation.gotoTab({
            tabInformation: { name: 'profile', content: '' },
            statusBarStyle: 'light-content'
        })
    }}>
    <Profile navigator={this.props.navigator} navigation={this.props.navigation />
</TabBarIOS.Item>

在整个iPhone4s、iPhone5和iPhone6s+中，图标都是低质量的，如果它们没有被选中，它们也会被灰色色调覆盖，这会完全破坏图像。选中时，它们将被蓝色默认色调所覆盖。我尝试将tint颜色设置为transparent，但这使得该选项卡图标在活动时不可见。

这种颜色使我们完全倒退，因为在选项卡栏中设置图标是我们推迟到最后的事情之一，因为它应该是过于简单的。结果是更大的麻烦之一。

在此之前，我们使用的是UIWebView，并将512x512图像缩小到大小以提高清晰度。我无法判断这些较小的图标是真的质量很低，还是模糊是由TabBarIOS组件本身呈现的。

编辑:图标上的命名问题已经解决，即使在使用renderAsOriginal之后，在颜色中重绘图标的问题仍在继续

Answer 1

首先，对于你的图片，你没有正确命名，它应该是：

|_images
|__tabbaricons
|___ tab-1-on.png          (35x35)
|___ tab-1-on@2x.png        (70x70)
|___ tab-1-on@3x.png        (105x105)
|___ tab-1-off.png         (35x35)
|___ tab-1-off@2x.png       (70x70)
|___ tab-1-off@3x.png       (105x105)

该系统采用了较低的质量，并将其应用于所有视网膜设备，从而获得了低质量的图像。

关于浅色颜色，尝试将此prop添加到TabBarIOS.Item中

renderAsOriginal={true};

请注意，TabBar图标下的文本将仅通过tintColor实现，因此您需要管理selected和unSelected以及tintColor for selected和unSelected所需的图标。